React 성능 최적화 완전 가이드

핵심 요약

한 줄 요약: React 성능은 측정 후 최적화입니다. render 단계와 commit 단계를 구분하고, memo/useMemo/useCallback은 프로파일에서 병목이 찍힐 때만 도입합니다.

---

소개

React 앱이 커질수록 “클릭했는데 반응이 늦다”는 피드백이 나오기 쉽습니다. 우리도 대시보드·이벤트 페이지를 만들면서 리렌더링·번들 크기 이슈를 겪었고, 그때 적용한 메모이제이션·코드 스플리팅·가상화 같은 기법들을 실전 예제 중심으로 정리했습니다.

React.memo를 활용한 컴포넌트 메모이제이션

React.memo는 props가 변경되지 않았을 때 컴포넌트의 리렌더링을 방지합니다.

기본 사용법

커스텀 비교 함수

useMemo와 useCallback

useMemo로 값 메모이제이션

useCallback으로 함수 메모이제이션

코드 스플리팅 (Code Splitting)

React.lazy와 Suspense

라우트 기반 코드 스플리팅

가상화 (Virtualization)

대량의 리스트를 렌더링할 때는 가상화를 사용하여 성능을 크게 개선할 수 있습니다.

react-window 사용 예제

불필요한 리렌더링 방지

Context 최적화

이미지 최적화

Next.js Image 컴포넌트 활용

지연 로딩 (Lazy Loading)

번들 크기 최적화

Tree Shaking

동적 import

성능 측정 및 프로파일링

React DevTools Profiler

Web Vitals 측정

실전 최적화 체크리스트

1. 컴포넌트 최적화

   • React.memo로 불필요한 리렌더링 방지
   • useMemo와 useCallback 적절히 활용
   • 큰 컴포넌트를 작은 컴포넌트로 분리

2. 코드 스플리팅

   • 라우트별 코드 스플리팅
   • 큰 라이브러리 동적 import
   • 조건부 렌더링 컴포넌트 lazy loading

3. 리스트 최적화

   • 가상화 적용 (100개 이상 아이템)
   • 키 값 최적화
   • 인라인 함수/객체 생성 최소화

4. 이미지 최적화

   • 적절한 이미지 포맷 사용 (WebP, AVIF)
   • 이미지 지연 로딩
   • 반응형 이미지 사용

5. 번들 최적화

   • Tree shaking 확인
   • 중복 의존성 제거
   • 번들 크기 분석

결론

React 성능 최적화는 다음 원칙을 따릅니다:

1. 측정 후 최적화: 실제 병목 지점을 파악
2. 점진적 개선: 한 번에 모든 것을 최적화하지 말고 단계적으로
3. 사용자 경험 우선: 성능 개선이 UX를 해치지 않도록 주의
4. 유지보수성 고려: 과도한 최적화는 코드 복잡도를 증가시킬 수 있음

이러한 최적화 기법들을 적절히 활용하면 사용자에게 더 빠르고 부드러운 경험을 제공할 수 있습니다.

참고 자료

• React 공식 문서 - 성능 최적화
• Web Vitals
• React DevTools Profiler