측정 먼저
Profiler로 느린 상호작용을 기록하고 실제 렌더 횟수와 commit 시간을 기준값으로 남깁니다.
React.memo, useCallback, useMemo 실습은 적용 전 측정과 적용 후 확인이 한 묶음일 때 의미가 있습니다.
Profiler로 느린 상호작용을 기록하고 실제 렌더 횟수와 commit 시간을 기준값으로 남깁니다.
자식 컴포넌트에 넘기는 함수와 객체 props를 필요한 곳에서만 안정화해 memo 비교를 살립니다.
같은 사용자 동작을 다시 녹화해 렌더 수, 시간, 코드 복잡도가 모두 납득 가능한지 봅니다.
측정 대상은 버튼 클릭, 필터 입력, 목록 갱신처럼 사용자가 실제로 느끼는 동작이어야 합니다.
memo된 컴포넌트가 다시 렌더된다면 props 참조와 context 변경을 먼저 확인합니다.
최적화 후에도 읽기 쉬운 코드인지 확인하고 측정 근거가 사라지면 제거할 수 있게 둡니다.