2nd/10_Wiki/Topics_Dev/React 기반 프론트엔드 성능 최적화.md

# [[React 기반 프론트엔드 성능 최적화|React 기반 프론트엔드 성능 최적화]]

## 📌Brief 시 Summary
React 기반 프론트엔드 성능 최적화는 불필요한 연산과 네트워크 페이로드를 최소화하여 빠르고 반응성 높은 사용자 경험을 제공하기 위한 일련의 기술적 접근이다 [1, 2]. 브라우저의 렌더링 경로(CRP)에서 발생하는 병목 현상을 줄이는 기초적인 최적화부터, 가상 DOM([[Virtual DOM|Virtual DOM]])의 재조정(Reconciliation) 과정과 리렌더링을 제어하는 React 고유의 최적화 기법을 포괄한다 [2-4]. 현대의 React는 Fiber 아키텍처, 자동 배칭, React Compiler를 통한 자동 메모이제이션, 그리고 [[React Server Components|React Server Components]](RSC)를 활용하여 LCP, INP, CLS와 같은 핵심 웹 지표([[Core Web Vitals|Core Web Vitals]])를 개선하고 애플리케이션의 성능을 극대화한다 [1, 5-9].

## 📖 Core Content

**1. 브라우저 렌더링 과정 ([[Critical Rendering Path|Critical Rendering Path]]) 및 Reflow/Repaint 최소화**
브라우저가 화면을 그리는 렌더링 경로는 HTML 파싱을 통한 **DOM 트리 생성**, CSS 파싱을 통한 **[[CSSOM|CSSOM]] 트리 생성**, 이 둘을 결합한 **[[Render Tree|Render Tree]] 생성**, 요소의 크기와 위치를 계산하는 **Layout(Reflow)**, 픽셀을 화면에 그리는 **Paint(Repaint)**, 그리고 레이어를 합성하는 **Compositing** 단계로 이루어진다 [10-13]. 
* **Reflow (Layout):** 요소의 크기(width, height)나 위치, 여백(margin, padding)이 변경될 때 발생하며, 문서 내 다른 요소들의 기하학적 구조까지 다시 계산해야 하므로 연산 비용이 매우 크다 [12, 14, 15]. DOM 노드의 깊이를 줄이고 레이아웃 스래싱([[Layout Thrashing|Layout Thrashing]])을 방지하는 것이 중요하다 [14, 16].
* **Repaint (Paint):** 배경색(background-color), 그림자(box-shadow) 등 시각적 속성만 변경될 때 발생하며 레이아웃 변경은 수반하지 않으나, 과도하게 발생할 경우 렌더링 파이프라인을 방해할 수 있다 [14, 17, 18]. 
* **최적화 방법:** Reflow와 Repaint를 최소화하기 위해 DOM 상호작용을 줄이고, 애니메이션 구현 시 `top`이나 `left` 대신 GPU 가속을 받을 수 있는 `transform` 속성을 사용하는 것이 권장된다 [18-21]. 

**2. React가 빠른 이유: Virtual DOM과 재조정(Reconciliation)**
React는 실제 DOM을 직접 조작하는 것의 비효율성을 극복하기 위해 메모리 내에 가벼운 UI 표현인 **가상 DOM(Virtual DOM)**을 유지한다 [22, 23]. 상태가 변경되면 React는 새로운 가상 DOM 트리를 생성하고 이전 트리와 비교(Diffing)하여 변경된 부분만 실제 DOM에 적용한다 [22, 23]. 이 "재조정" 과정은 $O(n^3)$의 복잡도를 가지는 기존 트리 비교 알고리즘 대신, 요소의 타입이 다르면 트리를 완전히 새로 구축하고 리스트에서는 `key` prop을 통해 요소를 추적하는 휴리스틱 기반의 **$O(n)$ 최적화 알고리즘**을 사용하여 처리 속도를 비약적으로 높였다 [24-27].

**3. Fiber 아키텍처와 동시성 렌더링([[Concurrent Rendering|Concurrent Rendering]])**
React 16부터 도입된 **Fiber 아키텍처**는 기존의 동기적이고 차단적인 렌더링을 개선하기 위해 렌더링 작업을 중단하고 재개할 수 있는 '작업 단위(Unit of Work)'로 분할한다 [28-30]. 
* **렌더 단계(Render Phase):** 부수 효과(Side effect) 없이 가상 DOM 트리를 순회하며 변경 사항을 계산하는 단계로, 높은 우선순위의 작업이 들어오면 언제든 중단되거나 재시작될 수 있다 [31, 32].
* **커밋 단계(Commit Phase):** 계산된 변경 사항을 실제 DOM에 동기적으로 한 번에 적용하며, 이 단계는 중단할 수 없다 [32, 33].
Fiber는 우선순위 시스템(Lanes)을 통해 사용자 입력과 같은 긴급한 작업을 데이터 페칭 같은 덜 긴급한 작업보다 먼저 처리할 수 있게 한다 [34, 35]. [[React 19|React 19]]의 `useTransition`과 `[[useDeferredValue|useDeferredValue]]` 훅은 이 아키텍처를 활용하여 무거운 연산 중에도 메인 스레드를 차단하지 않고 UI 반응성(INP 지표)을 유지하는 동시성 기능을 제공한다 [36-38].

**4. 리렌더링 통제와 React Compiler의 도입**
컴포넌트의 상태가 변경될 때마다 하위 트리의 모든 컴포넌트가 다시 렌더링되는 '리렌더링 폭포(Re-render Cascade)' 현상은 React 성능 저하의 주요 원인이다 [4, 39].
* **수동 메모이제이션:** 기존에는 이를 막기 위해 `React.memo`, `useMemo`, `useCallback`을 사용하여 props가 변경되지 않았을 때의 렌더링을 수동으로 차단했다 [40-42]. 하지만 이 방식은 코드 복잡도를 높이고 참조 일치성 관리에 따른 잦은 실수를 유발했다 [43].
* **React Compiler (자동 메모이제이션):** React 19부터 도입된 React Compiler는 빌드 타임에 AST(추상 구문 트리)를 분석하여 데이터 흐름을 파악하고, 필요한 곳에 자동으로 메모이제이션 경계를 삽입한다 [8, 9, 44, 45]. 이를 통해 개발자는 성능 최적화 코드를 직접 작성하지 않아도 세밀한 반응성(Fine-Grained Reactivity)을 얻어 최대 60% 이상의 불필요한 리렌더링을 줄일 수 있다 [8, 46, 47].
* **자동 배칭([[Automatic Batching|Automatic Batching]]):** [[React 18|React 18]]부터는 Promise나 setTimeout 같은 비동기 콜백 내에서 여러 상태 업데이트가 발생하더라도 이를 묶어 단 한 번의 리렌더링만 트리거하는 자동 배칭이 기본적으로 적용되어 성능을 최적화한다 [7, 48-50].

**5. 렌더링 전략의 진화 ([[CSR vs SSR vs SSG|CSR vs SSR vs SSG]] vs RSC)**
* **CSR (Client-Side Rendering):** 자바스크립트를 다운로드한 후 브라우저에서 UI를 렌더링하므로 상호작용이 빠르지만, 초기 로드(FCP)가 느리고 SEO에 불리하다 [51-53].
* **SSR (Server-Side Rendering) & SSG (Static Site Generation):** 서버에서 HTML을 완성하여 전송해 초기 표시 속도와 SEO를 개선한다 [54-56]. 브라우저는 HTML을 화면에 그린 후, 자바스크립트를 실행해 이벤트 리스너를 연결하는 **[[Hydration|Hydration]]** 과정을 거쳐 페이지를 상호작용 가능하게 만든다 [54, 57-59]. 
* **[[React Server Components (RSC)|React Server Components (RSC]]:** 서버에서만 실행되고 클라이언트로 자바스크립트 코드를 일절 보내지 않는(Zero-Bundle) 새로운 컴포넌트 패러다임이다 [60-63]. 무거운 데이터 페칭이나 정적인 UI 렌더링을 서버가 전담하므로, 번들 크기를 비약적으로 줄이고 Hydration 비용 자체를 제거하여 성능을 극대화한다 [62, 64, 65]. 대규모 애플리케이션에서는 서버 컴포넌트와 클라이언트 컴포넌트를 혼합하여 각 실행 환경의 장점을 모두 취할 수 있다 [62, 66].

## 🔗 Knowledge Connections
- **Related Topics:** [[Critical Rendering Path|Critical Rendering Path]], Virtual DOM, React Fiber Architecture, [[Hydration|Hydration]], React Compiler, [[React Server Components|React Server Components]]
- **Projects/Contexts:** [[Next.js|Next.js]] 기반 하이브리드 렌더링 (SSR/SSG/ISR), React 18/19 마이그레이션 및 동시성 렌더링 적용
- **Contradictions/Notes:** 수동 메모이제이션 방식에 대해 소스 18은 "모든 컴포넌트를 무분별하게 메모이제이션(`React.memo` 등)하는 것은 오버헤드를 증가시켜 역효과를 낼 수 있으므로 프로파일링 후 제한적으로 적용해야 한다"고 주의를 줍니다. 반면 최신 기술인 React Compiler를 다룬 소스 336과 341에 따르면, 컴파일러는 코드 분석을 통해 "실제로 혜택을 제공할 수 있는 지점에 지능적으로 메모이제이션을 삽입"하여 개발자의 오버헤드나 오류 없이 성능을 자동으로 획기적으로 개선한다고 설명합니다.

---
*Last updated: 2026-04-25*