ui calibration

성능 최적화 실습 검증 기준

React.memo, useCallback, useMemo 실습은 적용 전 측정과 적용 후 확인이 한 묶음일 때 의미가 있습니다.

Profile

측정 먼저

Profiler로 느린 상호작용을 기록하고 실제 렌더 횟수와 commit 시간을 기준값으로 남깁니다.

Stabilize

참조 고정

자식 컴포넌트에 넘기는 함수와 객체 props를 필요한 곳에서만 안정화해 memo 비교를 살립니다.

Confirm

효과 확인

같은 사용자 동작을 다시 녹화해 렌더 수, 시간, 코드 복잡도가 모두 납득 가능한지 봅니다.

profile

측정 대상은 버튼 클릭, 필터 입력, 목록 갱신처럼 사용자가 실제로 느끼는 동작이어야 합니다.

memo

memo된 컴포넌트가 다시 렌더된다면 props 참조와 context 변경을 먼저 확인합니다.

검토

최적화 후에도 읽기 쉬운 코드인지 확인하고 측정 근거가 사라지면 제거할 수 있게 둡니다.