리액트 복습. 최적화에 쓰이는 useMemo, useCallback, React.memo의 활용법

next학습에 앞서, 헷갈리는 최적화 훅들에 대해 복습해보았다.

 

최적화는 기능 구현 완료 후 -> 최적화 (마지막) . 도중에 하면 최적화가 일그러질수있어서 가장 나중 단계에 한다.
그리고 꼭 필요한것만 최적화. 

언제 쓰는가?

 

useMemo 

자식 리렌더 여부가 아니라, 현재 컴포넌트 “안에서” 필터/정렬/무거운 계산의 결과값을 캐싱해 계산 낭비를 줄이고 싶을 때 쓴다.

 

useCallback

의존성이 안 바뀌면 같은 함수 참조를 재사용해 자식에 넘기는 콜백의 변경을 막는다. onChange, onClick 같은 함수들

 

React.memo

(컴포넌트) prop이 변경되는지 얕은비교하여 렌더링 결정

3줄 요약

 

“값"이면 useMemo, 
"함수"면 useCallback, 
"컴포넌트"면 React.memo로 외우면 된다.