Before
높은 비용
PROFILE FIRST
최적화는 적용 전후 숫자가 좋아졌을 때만 유지한다
memo 계열 도구는 렌더를 줄일 수 있지만 비교와 캐싱 비용도 만듭니다. Profiler로 느린 지점을 찾고, 적용 후 같은 사용자 동작을 다시 기록해 효과를 확인합니다.
After
개선 확인
변하지 않은 props 경계에서 중단
기준 동작 기록
같은 클릭, 입력, 스크롤을 정하고 Profiler로 첫 기록을 남깁니다.
원인 분류
state, props, context 중 어떤 입력이 렌더를 만든 것인지 봅니다.
작게 적용
memo, useCallback, useMemo 중 하나만 먼저 적용해 변수를 줄입니다.
다시 비교
렌더 횟수와 commit 시간이 줄었을 때만 최적화를 유지합니다.