dukDukz

useReducer 상태관리 useState랑 비슷하다 상태를 변경하는 로직을 다른 곳에서 처리할 수 있다. 상태관리 할때 객체를 사용할 수 있어서 편리하다. Context Props 하위 컴포넌트에 보내는것이 까다로웠는데 이거를 편리하게 해준다 webpack5/component/counter 폴더 생성 * useReducer const [변수명,dispatch] = React.useReducer() const [number, dispatch] = React.useReducer(reducer,0) 구조 : 함수 number 라는 값을 바꾸기 위해서 dispatch를 써야한다 reducer를 쓸때는 컴포넌트 밖에다 놓자 dispatch는 setState 쓰듯이 쓰면 된다 dispatch({ }) dispa..

import React, { useState, useMemo, useCallback } from 'react' const Memo = () => { const [username, setUsername] = useState('') //React 가 빠진 이유는 위에 import 때문 const [list, setList] = useState([]) const change = (e) => { let { value } = { ...e.target } setUsername(value) } const submit = (e) => { e.preventDefault() const newList = [...list] newList.push(username) setList(newList) setUsername('') }..

useMemo 와 useCallback을 사용하는 이유는? /0712/vifo.html DP : 다이나믹 프로그래밍 - 어려운 알고리즘 중 하나라고 볼 수 있다. 코테 마지막 문제에서 자주 출제되고 그래프 + DP 로 출제가 된다. 그러면 DP가 뭐냐? - 규칙을 찾는거라고 보면 된다. * 피보나치 수열 문제 - 메모이제이션을 쓰는 이유 (최적화를 위해) 더보기 function fibo(n){ if(n == 1) return 1 if(n == 2) return 1 return fibo(n-2) + fibo(n-1) } 이렇게 쓰면 연산을 너무 많이 하게 된다. 개복잡함 - 그래서 이걸 메모제이션 으로 바꾸자 let memo = {} function fibo(n) { if (n in memo) { let ..

/class/example20.html {React.createElement(LoginBox)} 이 구문 자체를 JSX라고 한다 이렇게 하면 로그인 박스가 두번 실행된다 - 같은 구문 - Babel이 꺽쇄를 보고 해석해서 저 createElement로 바꿔주는거임 저 대괄호의 의미는 뭘까?? --> jsx에서 js 문법을 쓰겠다 빈 태그 혹은 특정태그가 들어가는 순간부터 넌적스 구문이 시작된다는 의미 그때부터는 넌적스로만 구문을 작성해야한다는 뜻이다. 근데 그 안에서 또 javascript로 실행시키고 싶으니 (js문법을 쓰고 싶으니) {} 대괄호를 쓴다 예 ) res.render('index',{ name : 'ingoo' }) 넌적스가 저 index를 읽어서 해석해서 하는거임 -- index.html..

이전에 세팅 해놓은 Webpack을 재사용 해보자 1. 필요한 파일 복사 pacakge.json webapack.config.js 복사해오기 2. 작업할 폴더 안에 들어가서 npm install npm install 안될때 * 버전 오류일 가능성이 크다 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 이런 오류가 난다면 npm install --save --legacy-peer-deps 이렇게 하면 된다. 3. index.html 만들기 root div 만들고 4. index.jsx 에서 기본 App Component 만들기 (import로 React 와 ReactDOM 가져오기) 5. npm run dev 하면 바로 ..

npm install -g create-react-app npx create-react-app reactsample [내가생성할폴더명] cd reactsample (폴더안으로 들어가자) npm start 하면 실행되면서 자동으로 페이지가 뜨게 된다 src/App.js 에서 코드 작성하면 된다. src/index.js 에서 쓸데없는 코드를 지워준다.

웹팩 webpack 여러개의 js 파일을 하나로 모아준다고 보면 된다. ex) 변수 이름이 겹치는 경우 더보기 let a = 10; let a = 0; console.log(a) 웹펙이 변수가 겹쳐도 둘 다 사용할 수 있게 변환해준다. -> 코드가 꼬이지 않도록 해주고 모든 브라우저에서 사용 가능하도록 해준다. * 여러파일을 쪼개 놓은걸 합쳐준다? - 왜 쪼개지 ? 협업, 코드 재활용 위해서 -> 파일을 엄청 쪼개놓고 웹펙으로 합쳐서 한 파일로 만들어서 퉁치겠다 * 웹팩이 어떻게 구동되는가? node js 환경에서 돌아간다. 코드를 짤 필요는 없지만 설정값이 좀 많다. 웹팩을 사용하기 위해서는 하나의 js 파일만 있으면 됨 환경설정 값만 잘 알고 있으면 된다. CRA create react app? 그 ..