# [[React 18|React 18]]

## 📌 Brief Summary
React 18은 렌더링 과정을 최적화하여 프론트엔드 성능을 크게 향상시키는 기능을 도입한 주요 버전입니다 [1-3]. 이 버전의 가장 핵심적인 특징은 '자동 일괄 처리([[Automatic Batching|Automatic Batching]])'가 기본적으로 활성화되어, 다양한 비동기 작업의 상태 업데이트를 하나로 묶어 처리한다는 점입니다 [3-5]. 이를 통해 불필요한 리렌더링을 방지하고 애플리케이션의 반응성과 전체적인 프레임 속도를 매끄럽게 개선합니다 [2, 6, 7].

## 📖 Core Content
* **자동 일괄 처리(Automatic [[Batching|Batching]])의 전면 적용**
  React 18 이전에는 `onClick`이나 `onChange` 같은 React의 네이티브 이벤트 핸들러 내부의 업데이트만 일괄 처리되었습니다 [2, 8, 9]. 하지만 React 18부터는 프로미스(Promises), `setTimeout`, `async/await` 함수와 같은 비동기 작업 내에서 발생하는 상태 업데이트까지 출처에 상관없이 자동으로 일괄 처리합니다 [2, 5, 8, 9]. 즉, 빠른 시간 내에 여러 상태 업데이트가 발생해도 DOM을 한 번만 업데이트하여 성능 병목 현상을 방지합니다 [4, 6, 10, 11].

* **가상 DOM([[Virtual DOM|Virtual DOM]]) Diffing 프로세스 경량화**
  여러 상태 변화를 한 번의 리렌더링으로 결합함으로써 가상 DOM의 Diffing 작업 횟수 자체가 줄어듭니다 [12]. 또한 `React.memo`나 `useMemo` 등을 통해 메모이제이션된 값에 대한 검사 횟수도 줄어들어, 렌더링 주기 당 CPU 작업량이 대폭 감소합니다 [12]. 실제 데이터 집약적인 대시보드를 대상으로 한 벤치마크에 따르면, 자동 일괄 처리를 통해 전체 렌더링 횟수가 약 40% 감소하고 최대 부하 시 프레임 속도가 25% 향상되었습니다 [1, 13].

* **업데이트 우선순위 제어 기능 ([[startTransition|startTransition]] & [[flushSync|flushSync]])**
  React 18은 렌더링 우선순위를 개발자가 직접 제어할 수 있는 API를 제공합니다 [13].
  * **`startTransition`**: 목록 필터링과 같이 무겁고 긴급하지 않은 상태 업데이트를 표시하여, 사용자의 타이핑이나 클릭 같은 긴급한 인터랙션을 차단하지 않도록 양보(yield)합니다 [13, 14].
  * **`flushSync`**: 즉각적인 UI 업데이트가 필수적인 경우(예: 상태 변경 직후의 입력 포커스 지정 등), React가 업데이트를 강제로 동기식으로 반영하게 만들어 자동 일괄 처리에서 예외로 둘 수 있습니다 [7, 13-15]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[Automatic Batching|Automatic Batching]], Virtual DOM, startTransition, [[flushSync|flushSync]]
- **Projects/Contexts:** [[React Performance Optimization|React Performance Optimization]]
- **Contradictions/Notes:** 소스에 따르면 `flushSync`를 사용해 자동 일괄 처리를 막을 수 있지만, 이를 남용하면 일괄 처리로 얻을 수 있는 성능 이점이 무효화될 수 있으므로 꼭 필요한 경우에만 제한적으로 사용해야 합니다 [7, 16].

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