본문 바로가기

Frontend

 (24)
React-Router(△) https://jineecode.tistory.com/154 react-router-dom 다루기 1. 설치 : npm install react-router-dom 2. src/index.js 에 import. import { BrowserRouter } from "react-router-dom"; 3. ReactDOM 에 코드 ReactDOM.render( , document.getElementById("root") ); 와 의 큰.. jineecode.tistory.com 1. 설치 : npm install react-router-dom 2. App.js에 코드 작성 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-..
벨로퍼트 모던 리액트 https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us Props :어떠한 값을 컴포넌트에게 전달하고자 할때 사용 import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } export default Hello; 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 사용 import React from 'react'; function Wr..
map 자바스크립트 내장함수(배열을 가져와 변환하여 새로운 배열을 만들어줌) react에서는 api를 가져와 화면에 표시할때 사용 *반드시 Key라는 props를 설정해야함!* 보통 id로 정하며, 고유값이 없다면 index로 쓰기도함 {movies.map(movie => {movie.title} {movie.summary} {movie.genres.map(g => {g})}
To Do List (Enrollent) 리액트로 To Do List 만들기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === ""){ return; } setToDos(currentArray => [toDo, ...currentArray]); setToDo(""); } return ( My To Dos ({toDos.length}) Add To Do..
useEffect useEffect( fn, [ deps ]) 1. deps가 빈배열일 때 처음에만 렌더링함. (리렌더링 하지 않음) 2. deps위치의 특정값이 변화할때만 렌더링함. +cleanup 함수 반환 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyworld] = useState("") const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyworld(event.target.value); console.log("I run all the tim..
Props & memo 1. Props function Btn({text, big}) 에서 text, big은 Btn 컴포넌트에게 줄수있는 props(properties)이다. 여러개의 동일한 컴포넌트 생성 시 마크업이나 스타일을 재사용할 때 유용하다. // btn text : Save Changes, fontsize : 18 function Btn({text, big}) { return ( {text} ); } function App() { return ( ); } 2. React.memo 컴포넌트의 props가 바뀌지(changeValue) 않았다면, 리렌더링을 방지(두번째 Btn은 render되지않음)하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 즉, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설..
Unit Converter ​
벨로퍼트 자바스크립트 강의(문서) https://learnjs.vlpt.us/ n * n); console.log(squared); //[1, 4, 9, 16, 25, 36, 49, 64] 1-09 배열 내장함수 reduce : 두개의 파라미터를 전달. 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째 파라미터는 reduce 함수에서 사용할 초깃값입니다. const numbers = [1, 2, 3, 4, 5]; let sum = array.reduce((accumulator, current) => accumulator + current, 0); console.log(sum); //15 2.1 삼항연산자 조건 ? true일때 : false일때 const array = [];..

티스토리툴바