컴포넌트 최적화 정리 (useMemo/useCallback/React.memo)

[React/리액트] 리액트 컴포넌트 최적화 정리 (useMemo/useCallback/React.memo)

 

• useMemo : 연산된 값을 재사용
• useCallback : 특정 함수 재사용
• React.memo : 컴포넌트 렌더링 결과물을 재사용

상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때문에 useCallback 의 deps 에 넣지 않아도 된다.

useMemo, useCallback, React.memo 는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 사용하는 것이 좋다.

(🚨 불필요한 비교 & 버그 발생)