불필요한 re-render를 어떻게 진단하고 수정하나요?

Question

Accepted Answer

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