부모 렌더
상태 변화로 부모 함수가 다시 실행됩니다.
memo 얕은 비교
prevProps와 nextProps를 항목별로
봅니다.
props 안정성 확인
원시값은 값, 참조값은 주소가 유지되는지 확인합니다.
같음: 렌더 skip
primitive
5와 5
number, string, boolean은 값이 같으면 같은 props입니다.
same reference
같은 객체 또는 같은 함수
이전과 같은 참조를 넘기면 자식 호출을 건너뜁니다.
다름: 다시 렌더링
new object
{ a: 1 }을 다시 생성
내용이 같아도 새 참조라면 달라진 props입니다.
new function
() => handler()
부모 렌더 때마다 새 함수가 생기면 memo를 통과하지 못합니다.
안정화 필요?
객체와 배열은 useMemo, 함수는 useCallback
의존성이 바뀔 때만 새 참조를 만들면 다음 부모 렌더에서 skip 가능성이 생깁니다.
계산 결과와 객체, 배열 참조를 고정합니다.
이벤트 핸들러 함수 참조를 고정합니다.
Profiler로 비교 비용보다 렌더 절감이 큰지 확인합니다.