프론트엔드 개발/성능 최적화

[React] useCallback, useMemo 사용하기

소개 prop가 새로 전달되었을때 또는 내부 state가 변경되었을때 리렌더링이 일어난다. 어디가 변경되었는지 확인하고 변경된 부분만 리렌더링 해야하는데 성능때문에 얕은 비교를 한다. 특히 참조 타입(함수)의 경우 얕은 비교 때문에 원치 않은 부분까지 전부 리렌더링 될 수 있는데 useCallback, useMemo 를 통해 이를 방지해주어야 한다. 원시 타입 얕은 비교 참조값(메모리주소)이 달라져도 값만 같으면 같은 것으로 간주 → 리렌더링 X 참조 타입 얕은 비교 참조값(메모리주소)이 달라지면 변경된 것으로 간주 → 리렌더링 O 불필요한 리렌더링 일어나는 경우 *이렇게 쓰면 안됨! 하위 컴포넌트에 전달하는 콜백 함수를 인라인함수로 사용 console.log("123")}/> 컴포넌트 내에서 로컬 함수..