React 리렌더링 최적화 판단
React.memo, useCallback, useMemo는 렌더 비용을 줄일 수 있지만 비교와 캐싱 비용도 만든다. 적용 전후를 같은 조건에서 비교한다.
기준 기록
같은 화면, 데이터, 사용자 동작으로 최적화 전 수치를 남긴다.
원인 분리
state, props, context 중 무엇이 렌더를 퍼뜨렸는지 찾는다.
작게 적용
문제 경계에만 memo, callback, memoized value를 붙인다.
전후 판정
렌더 횟수와 actual duration이 함께 줄어드는지 확인한다.
유지
수치가 줄고 코드 추적 비용이 낮을 때만 남긴다.
핵심memo 계열 도구는 “느낌상 좋아 보이는 코드”가 아니라 측정으로 남기는 최적화다.