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