React Performance: useMemo vs useCallback vs React.memo — When to Use Each

Context

React 개발자들은 React.memo, useCallback, useMemo 세 가지 최적화 도구의 적용 시점을 혼동하여 필요 없는 상황에서도 메모이제이션을 도입한다. 이로 인해 메모리 사용량 증가와 계산 오버헤드가 발생하여 성능을 오히려 악화시킨다.

Technical Solution

• React.memo 도입: 부모 컴포넌트 재렌더링 시에도 Props가 변하지 않은 자식 컴포넌트의 재렌더링 방지(얕은 비교 기반)
• useCallback 적용: 메모이제이션된 자식 컴포넌트에 전달되는 콜백 함수의 참조 안정화 → 의존성 배열에 정확히 필요한 값만 포함
• useMemo 사용: 필터링/정렬 같은 비용이 큰 계산 결과 메모이제이션 → 의존성 배열이 실제로 변경될 때만 재계산
• 잘못된 적용 사례 제거: 메모이제이션된 자식 컴포넌트 없이 단순 버튼 등에 useCallback 적용 금지
• 측정 기반 최적화: React DevTools Profiler로 실제 재렌더링 발생을 확인한 후에만 메모이제이션 도입

Key Takeaway

JavaScript의 참조 동등성(Referential Equality) 문제로 인한 불필요한 재렌더링을 각 도구의 정확한 용도에 맞춰 해결해야 하며, 직관이 아닌 프로파일링 데이터를 기반으로 최적화 결정을 내려야 성능 저하를 방지할 수 있다.