2nd/10_Wiki/Topics_Dev/React 18 Concurrent Features.md

# [[React 18 Concurrent Features|React 18 Concurrent Features]]

## 📌 Brief Summary
[[React 18|React 18]]의 동시성 기능(Concurrent Features)은 렌더링 작업을 중단, 일시 중지 및 재개할 수 있도록 하여 애플리케이션의 반응성을 획기적으로 향상시키는 핵심 메커니즘입니다. 이 기능은 긴급한 사용자 상호작용(예: 타이핑, 클릭)과 덜 긴급한 작업(예: 무거운 데이터 필터링)을 분리하여 메인 스레드의 차단을 방지합니다. 결과적으로 연산량이 많은 상황에서도 UI가 멈추지 않고 부드럽게 작동하게 하여 사용자 경험을 개선하고 핵심 웹 지표([[Core Web Vitals|Core Web Vitals]])를 최적화합니다.

## 📖 Core Content

*   **동시성 렌더링의 기반 ([[Fiber Architecture|Fiber Architecture]] & [[Lane Model|Lane Model]]):** 
    React의 동시성 기능은 Fiber 아키텍처의 작업 루프(Work loop)와 타임 슬라이싱([[Time-Slicing|Time-Slicing]])을 기반으로 작동합니다. 렌더링 작업을 작은 단위로 쪼개어 처리하며, 긴급한 사용자 입력이 발생할 경우 작업을 멈추고 브라우저에 제어권을 양보(Yield)할 수 있습니다 [1-3]. 업데이트의 중요도는 비트마스크 시스템인 'Lane 모델'을 통해 동기적(Sync), 사용자 차단(User-[[Blocking|Blocking]]), 기본(Normal), 유휴(Idle) 등의 우선순위 레벨로 관리됩니다 [4-6].
*   **`[[useTransition|useTransition]]`과 `[[startTransition|startTransition]]`:** 
    긴급하지 않은 상태 업데이트의 우선순위를 낮추어 UI의 반응성을 유지하는 기능입니다. 타이핑과 동시에 검색 결과를 필터링하는 등의 무거운 연산을 `startTransition`으로 감싸면, React는 사용자의 긴급한 상호작용을 먼저 처리하고 메인 스레드가 여유로울 때 해당 업데이트를 백그라운드에서 처리합니다 [7-9]. 또한 `isPending` 플래그를 제공하여 무거운 작업이 진행되는 동안 사용자에게 시각적 피드백(로딩 상태 등)을 보여줄 수 있습니다 [10].
*   **`[[useDeferredValue|useDeferredValue]]`:** 
    상태를 업데이트하는 코드(set[[State|State]])를 직접 제어할 수 없고 외부(예: Props)에서 값을 받아올 때 렌더링을 지연시키는 훅입니다 [10]. React는 새로운 필터링 결과 등 연산이 완료될 때까지 이전 렌더링 결과를 계속 화면에 표시하여 UI가 얼어붙는(Freezing) 현상을 방지합니다 [11].
*   **`[[flushSync|flushSync]]`를 통한 강제 동기화:** 
    동시성 기능이 적용된 상태에서도 DOM 요소에 즉각적으로 포커싱을 하거나 레이아웃을 측정해야 하는 예외적인 상황을 위해 제공되는 API입니다. `flushSync`로 감싼 상태 업데이트는 React가 즉각적이고 동기적으로 렌더링하도록 강제합니다 [8, 9].
*   **자동 일괄 처리 ([[Automatic Batching|Automatic Batching]]):** 
    React 18은 Promise, setTimeout, 비동기 작업 및 네이티브 이벤트 핸들러 내에서 연속적으로 발생하는 여러 상태 업데이트를 하나로 묶어 단일 리렌더링으로 처리합니다 [12-14]. 이로 인해 불필요한 [[Virtual DOM|Virtual DOM]] 비교와 렌더링 횟수가 급감하여 애플리케이션 성능이 향상됩니다 [13, 15].

## 🔗 Knowledge Connections
- **Related Topics:** `[[Fiber Architecture|Fiber Architecture]]`, `Automatic Batching`, `Lane Priority Model`, `[[Virtual DOM|Virtual DOM]]`
- **Projects/Contexts:** `[[React Performance Optimization|React Performance Optimization]]`, `[[Interaction to Next Paint (INP)|Interaction to Next Paint (INP]]`
- **Contradictions/Notes:** 동시성 훅(`useTransition`, `useDeferredValue`)은 코드의 실제 실행 속도를 높여주는 것이 아닙니다. 대신 무거운 연산이 즉각적인 사용자 피드백을 방해하지 않도록 처리 순서를 미뤄, 앱이 시각적으로 더 "빠르게 반응하는 것처럼(feel faster)" 느끼게 만드는 아키텍처적 접근입니다 [16]. 또한 `flushSync`는 남용할 경우 동시성 및 일괄 처리로 얻는 성능 이점을 무효화할 수 있으므로 주의해서 사용해야 합니다 [17].

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