먼저 측정하고, 그다음 진짜 원인을 수정하세요 — 추측으로 모든 곳에 useMemo를 뿌리지 마세요.
React DevTools Profiler를 사용하세요("Highlight updates when components render" 활성화). 어떤 컴포넌트가 re-render되었고 왜 그랬는지(props 변경, state 변경, 부모 render, context 변경)를 보여줍니다.
1. 매 render마다 새 객체/배열/함수 props가 React.memo를 무력화합니다:
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기// ❌ 매 render마다 새 함수 + 새 객체
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ 안정화
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. 매 render마다 재생성되는 Context value → 모든 소비자가 re-render. value를 memoize하거나 context를 나누세요.
3. 너무 높이 배치된 state. 더 적은 컴포넌트가 의존하도록 state를 낮추는 것이 종종 가장 큰 이득입니다:
// 빠르게 변하는 입력 state를 입력 컴포넌트로 DOWN 이동
// 그래서 타이핑이 페이지 전체를 re-render하지 않도록
4. render 중의 비용 큰 작업 → useMemo로 감싸세요.
re-render는 보통 저렴합니다 — React는 빠릅니다. 대부분의 "최적화"는 측정 가능한 이득 없이 복잡성만 추가합니다. memo를 흩뿌리기보다 구조적 수정(state colocate, 수천 개 행에 대한 리스트 가상화)을 선호하세요. profiler가 드러낸 특정 핫스팟을 최적화하고, 수정이 실제로 도움이 되었는지 재측정하여 확인하세요.