주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn state나 props가 늘어나면 관리가 힘들어진다. 그리고 props를 넘기게될때 자식에 자식에 자식의 컴포넌트가 있다면 복잡해진다. 이떄 useReducer를 써서 관리할 수 있다. useReducer를 배우면 redux랑 비슷한 효과를 낼 수 있다. contextAPI + useReducer를 쓸 경우 redux를 사용안해도 되지않나?라고 하는경우들이 있는데 대체하기는 어렵다고 한다. 거창한 redux가 필요없을 경우 (작은 프로젝트)에는 대체하는 형식으로 쓸수는 있다고 한다. 왜냐면 contextAPI와 useReducer를 쓰..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn Hooks에 관한 자잘한 팁들 use 시리즈들은 순서가 매우매우 중요해서 중간에 바뀌면 안된다. const Test = () => { const [number, setNumber] = useState(); // 1 const [string, useString] = useState(); // 2 조건문을 통해 생성의 여부를 결정하면 매우 위험하다. const Test = () => { const [number, setNumber] = useState(); // 1 const [string, useString] = useState(); /..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useMemo와 useCallback Class에서 작업했던 것들을 Hooks로 옮기다보면 Class에서 문제가 되지 않던 부분들이 문제가 되는 경우가 있다. Hooks는 함수안에 있는 내용이 재 렌더링이 되는데, getNumbers라는 함수가 Hooks의 특성으로 인해서 재 렌더링이될 수 있다. import React, { useState, useRef, useEffect } from 'react'; function getNumbers(){ // ...... } const Test = () => { const numbers =() =..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useEffect로 업데이트를 감지할 수 있다. 재 렌더링이슈가 없기때문에 state나 props를 쓰지 않으면 앞에서도 말했듯이 일반 함수로 생성하는 것이 좋다. componentDidUpdate가 될때 hooks(useEffect)로 변경할때 힘든 부분이 성능문제다. useEffect는 1:1로 대응되는 것이 아니기 때문이다. import React, { useState, useRef, useEffect } from 'react'; const Lotto = () => { const [numbers, setNumbers] = useS..