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

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 성능최적화 구글확장플러그인 devtools로 확인하여 테스트한 후에 최적화가 필요하면 진행한다. 최적화작업은 작업의 마지막에 한다. useEffect와 useRef로 재렌더링이 되는 이유를 디버깅할 수 있는 방법이 있다. ref를 만들어서 props나 state들을 넣고 비교하면서 검사하면된다, import React, {useCallback, useEffect, useRef}from 'react'; const Test = () => { const Ref = uesRef([]); useEffect(() =>{ // 콘솔에 찍어보자 co..

강의 유튜브 주소 : 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 =() =..