2nd/10_Wiki/Topics/Frontend/React 18 & 19 Performance Optimization.md

# [[React 18 & 19 Performance Optimization|React 18 & 19 Performance Optimization]]

## 📌 Brief Summary
[[React 18|React 18]] 및 19의 성능 최적화는 동시성 렌더링, 자동 배칭(Automatic Batching), 그리고 빌드 타임 컴파일러를 통해 불필요한 렌더링을 최소화하고 UI 반응성을 극대화하는 기술적 진보를 의미합니다 [1-4]. React 18은 다양한 비동기 이벤트의 상태 업데이트를 한 번에 묶는 자동 배칭과 `useTransition`을 통한 동시성 훅을 도입했습니다 [3, 5, 6]. [[React 19|React 19]]는 React Compiler를 도입하여 수동 메모이제이션의 부담을 없애고, [[React Server Components|React Server Components]](RSC) 아키텍처를 통해 클라이언트로 전송되는 [[JavaScript|JavaScript]] 번들 크기를 획기적으로 줄였습니다 [2, 4, 7, 8].

## 📖 Core Content
* **React 18 자동 배칭(Automatic [[Batching|Batching]])**
  React 18부터는 프로미스, `setTimeout`, 네이티브 이벤트 핸들러 내부에서 발생하는 상태 업데이트까지 모두 한 번의 리렌더링으로 묶어서 처리하는 자동 배칭이 기본으로 적용됩니다 [3, 9, 10]. 이를 통해 [[Virtual DOM|Virtual DOM]] 디핑(Diffing) 연산을 최소화하며, 특정 데이터 집약적인 대시보드 사례에서는 렌더링 횟수를 최대 40% 줄이고 프레임 속도를 25% 향상시키는 성과를 냈습니다 [1, 11, 12]. 만약 즉각적인 DOM 업데이트가 반드시 필요한 경우라면 `[[flushSync|flushSync]]` API를 사용하여 자동 배칭을 우회할 수 있습니다 [12-14].

* **동시성 렌더링 기능(Concurrent Features)**
  React 18/19의 동시성 훅인 `useTransition`과 `[[useDeferredValue|useDeferredValue]]`는 메인 스레드가 차단되는 것을 방지합니다 [5, 12, 13]. 타이핑이나 클릭과 같은 긴급한 상호작용 업데이트와, 대용량 리스트 필터링 등 비긴급 상태 업데이트를 분리 처리하여 앱의 INP(Interaction to Next Paint) 지표를 크게 개선합니다 [5, 12, 15-17].

* **[[React 19 Compiler|React 19 Compiler]]와 자동 메모이제이션**
  2025년 말 안정화된 React Compiler는 빌드 타임에 추상 구문 트리(AST)를 분석하여 데이터 흐름을 파악하고 최적의 위치에 자동으로 메모이제이션 경계를 삽입합니다 [2, 18-21]. 이 컴파일러는 참조 동일성 문제로 발생하는 연쇄적인 리렌더링(Re-render Cascade)을 근본적으로 방지하며, 개발자가 직접 `useMemo`, `useCallback`, `React.memo`를 수동으로 작성해야 하는 인지적 부담을 덜어줍니다 [2, 4, 22, 23]. 정밀한 자동 메모이제이션 덕분에 Meta 내부 테스트에서는 렌더링 횟수가 60% 감소하고 사용자 상호작용 속도가 2.5배 향상되었습니다 [24].

* **[[React Server Components (RSC)|React Server Components (RSC]] 활용**
  RSC는 렌더링과 컴포넌트 로직이 서버에서만 배타적으로 실행되는 새로운 아키텍처로, 클라이언트 JavaScript 번들 사이즈에 추가 바이트를 발생시키지 않습니다(0 바이트) [7, 8, 25, 26]. 클라이언트에서 여러 번 발생하는 데이터 페칭 왕복(waterfall)을 유발하는 대신, 서버에서 직접 데이터베이스나 로컬 시스템에 안전하게 접근하여 처리한 뒤, 직렬화된 React 명령(React Flight 프로토콜)과 HTML만을 클라이언트에 스트리밍하여 초기 로딩 속도와 보안을 개선합니다 [27-31].

* **기본적인 성능 최적화 기법**
  최신 렌더링 기능 외에도, 성능 확보를 위해서는 긴 목록 렌더링 시 가상화를 적용하는 `react-window` 라이브러리 사용, 라우트 단위의 `React.lazy()`를 이용한 코드 분할, 그리고 인라인 객체 및 함수의 불필요한 생성 방지 같은 원칙적인 최적화가 꾸준히 권장됩니다 [32-35].

## 🔗 Knowledge Connections
- **Related Topics:** `[[Automatic Batching|Automatic Batching]]`, `React Compiler`, `Concurrent Rendering`, `[[React Server Components|React Server Components]]`
- **Projects/Contexts:** `[[Next.js App Router|Next.js App Router]]`, `[[Virtual DOM|Virtual DOM]]`
- **Contradictions/Notes:** 소스 자료에 따르면 React Compiler가 최적화의 90% 이상을 자동화하고 대부분의 경우 `useMemo`와 `useCallback`을 대체하지만, Effect 종속성을 명시적으로 제어해야 하거나 타사 라이브러리의 참조 안정성이 필수적인 밀리초 단위의 중요한 성능 경로(Critical performance path)에서는 여전히 수동 메모이제이션이 "이스케이프 해치(Escape Hatch)"로 작동해야 한다고 강조합니다 [36-39].

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