2nd/10_Wiki/Topics/React 성능 최적화.md

React 성능 최적화

📌 Brief Summary

React 성능 최적화는 불필요한 리렌더링을 방지하고 번들 크기를 줄여 애플리케이션의 로딩 속도와 상호작용 반응성을 향상시키는 일련의 과정입니다 [1, 2]. 주요 원인인 리렌더링 캐스케이드와 큰 초기 자바스크립트 번들을 해결하기 위해 메모이제이션, 코드 분할, 가상화 등의 기술이 활용됩니다 [1-5]. 최근에는 React 18의 자동 배칭(Automatic Batching)과 동시성(Concurrent) 기능, React 19의 자동 메모이제이션을 지원하는 React Compiler가 도입되어 성능 최적화 작업이 더욱 자동화되고 효율적으로 발전하고 있습니다 [6-9].

📖 Core Content

• 성능 저하의 주요 원인: 부모 컴포넌트의 상태 변경 시 속성(props) 변경 여부와 관계없이 모든 자식 컴포넌트가 다시 렌더링되는 '리렌더링 캐스케이드(Re-Render Cascade)'가 가장 일반적인 원인입니다 [1]. 또한 대규모 자바스크립트 번들로 인한 초기 로드 지연, 렌더링 시마다 실행되는 무거운 데이터 연산, 인라인 객체 및 함수 생성 등도 성능을 저하시킵니다 [2, 10, 11].
• 주요 성능 최적화 기법:
  • 코드 분할 (Code Splitting): React.lazy()와 Suspense를 라우트 수준에서 활용하면 애플리케이션을 작은 청크로 나누어 로드할 수 있어 초기 번들 크기를 30~50%까지 줄이고 LCP(최대 콘텐츠풀 페인트)를 개선할 수 있습니다 [3].
  • 메모이제이션 (Memoization): React.memo, useMemo, useCallback을 사용하여 변경되지 않은 속성에 대한 불필요한 리렌더링을 방지합니다 [4, 12].
  • 리스트 가상화 (Virtualization): 화면에 수천 개의 항목이 있는 리스트를 렌더링할 때, 뷰포트에 보이는 항목과 약간의 버퍼만 실제 DOM 노드로 렌더링하여 DOM 크기와 렌더링 시간을 대폭 단축합니다 [5, 13].
  • DOM 구조 최적화: React Fragment(<></>)를 사용하여 구조를 위한 불필요한 래퍼(wrapper) DOM 노드 추가를 방지하고 누적 레이아웃 이동(CLS) 지표를 향상시킵니다 [14, 15].
  • 렌더링 전략 활용 (SSR, SSG, RSC): 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 도입해 자바스크립트 실행 전 초기 화면 표시 속도를 높입니다 [10, 16, 17]. 특히 [React Server Components|React Server Components]는 클라이언트 번들에 자바스크립트를 전혀 포함하지 않고 서버에서 독점적으로 실행되어 상호작용 속도를 크게 높입니다 [18-20].
• React 버전별 최적화 기능의 진화:
  • React 18: 여러 상태 업데이트를 하나로 묶어 리렌더링을 최소화하는 '자동 배칭(Automatic Batching)'이 네이티브 이벤트뿐만 아니라 비동기 작업에도 기본 적용되었습니다 [7, 21, 22]. 또한, useTransition과 [[useDeferredValue|useDeferredValue]] 훅을 통해 무거운 연산이 메인 스레드를 차단하지 않고 렌더링을 지연시킬 수 있는 동시성(Concurrent) 기능이 도입되었습니다 [6, 23, 24].
  • React 19 (React Compiler): 개발자가 수동으로 작성하던 메모이제이션을 빌드 타임에 AST(추상 구문 트리)를 분석하여 자동으로 처리해 주는 컴파일러가 도입되었습니다 [8, 9, 25]. 이를 통해 개발자는 코드의 유지보수성을 높이면서도 세밀한 반응성(fine-grained reactivity)을 확보할 수 있습니다 [8, 26].
• 측정 기반의 최적화: 직관에 의존하는 대신 React DevTools Profiler, Lighthouse 등 측정 도구를 활용하여 실제 렌더링 병목 지점과 Core Web Vitals 지표를 먼저 파악한 후 최적화를 진행해야 합니다 [27-31].

🔗 Knowledge Connections

• Related Topics: Virtual DOM, Core Web Vitals, React Compiler, React Server Components, Automatic Batching
• Projects/Contexts: Next.js, Meta Quest Store (React Compiler를 제품에 적용하여 초기 로드 12% 및 상호작용 속도 2.5배 개선 [32]), Sanity Studio (React Compiler 적용으로 렌더링 시간 20-30% 단축 [33])
• Contradictions/Notes: 여러 소스에 따르면 메모이제이션(useMemo, useCallback, React.memo)은 리렌더링 방지에 강력한 도구이지만, 프로파일링 측정 없이 모든 컴포넌트에 무분별하게 적용할 경우 오히려 연산 오버헤드와 메모리 사용량을 가중시켜 애플리케이션의 성능을 저하시키는 원인(안티 패턴)이 될 수 있다고 공통적으로 경고합니다 [12, 34].

---

Last updated: 2026-04-25