3.9 KiB
Lane Model
📌 Brief Summary
React의 Lane Model은 동시성 렌더링(Concurrent Rendering) 및 작업 스케줄링을 관리하기 위해 도입된 정교한 우선순위 시스템입니다 [1]. 이 모델은 업데이트의 성격(예: 사용자 입력, 데이터 페칭 등)에 따라 작업에 각기 다른 우선순위(Lane)를 할당하여 중요한 UI 업데이트가 먼저 처리되도록 보장합니다 [2-4]. 각 Lane은 32비트 정수의 비트마스크(bitmask)로 표현되어 효율적인 우선순위 연산과 다중 우선순위 관리를 가능하게 합니다 [5].
📖 Core Content
-
작동 원리 및 비트마스크 시스템: React의 Lane Model은 각 Lane이 특정 우선순위 레벨이나 작업 범주를 나타내는 비트마스크 시스템을 사용합니다 [5]. 이 시스템은 32비트 정수로 표현되며, React가 비트 연산(
lanes & otherLanes)을 사용하여 우선순위 겹침 여부를 확인하고, 어떤 Lane의 우선순위가 더 높은지 판별하거나 작업을 신속하게 배치(batch) 처리할 수 있도록 돕습니다 [4, 5]. 상태 업데이트가 발생하면 React는 해당 우선순위에 따라 업데이트를 특정 Lane에 할당하며, 렌더링 단계에서 가장 높은 우선순위부터 처리합니다 [4]. -
주요 우선순위 레벨 (Priority Lanes): 작업의 긴급성에 따라 여러 Lane이 존재합니다 [3, 6].
- Sync Lane: 타이핑이나 클릭과 같이 즉각적인 반응이 필요한 가장 긴급한 업데이트로 즉시 처리됩니다 [3, 6, 7].
- InputContinuous Lane: 스크롤이나 호버링 등 연속적인 사용자 입력 작업으로, 부드러운 화면 전환을 보장합니다 [3, 6, 7].
- Default Lane: 데이터 페칭 결과 등 일반적인 상태 업데이트를 위한 표준 우선순위입니다 [3, 6, 7].
- Idle Lane: 화면 밖(Offscreen) 렌더링이나 분석/로깅 등 브라우저가 유휴 상태일 때만 배경에서 처리되는 작업입니다 [3, 6, 7].
-
Lane Model의 주요 이점:
- 기아 상태 방지 (Starvation prevention): 우선순위가 낮은 작업이 계속 밀려 오랫동안 대기하는 경우, 이를 더 높은 우선순위의 Lane으로 승격시켜 최종적으로 반드시 처리되도록 보장합니다 [4].
- 우선순위 얽힘 (Entanglement): 우선순위가 낮은 업데이트가 높은 우선순위의 업데이트에 의존하는 경우, 두 Lane을 얽어(entangle) 함께 렌더링되도록 처리합니다 [4].
- 다중 작업 진행 관리 (Multi-WIP management): 단일 Fiber 노드가 각기 다른 Lane에 대해 여러 개의 진행 중인 작업(WIP, Work-In-Progress)을 가질 수 있으며, 스케줄러는 항상 가장 우선순위가 높은 WIP를 먼저 실행합니다 [8].
-
동시성 기능과의 연계: 이 모델은
useTransition및useDeferredValue와 같은 React 19의 동시성 기능(Concurrent features)을 구현하는 핵심 기반입니다 [9, 10]. 이 기능들은 긴급하지 않은 무거운 연산의 우선순위를 낮춤으로써(우선순위가 높은 업데이트가 도착하면 하위 작업은 중단 및 연기됨), UI의 반응성을 지속적으로 유지할 수 있게 해줍니다 [4, 9, 10].
🔗 Knowledge Connections
- Related Topics: React Fiber Architecture, Concurrent Rendering, Reconciliation, Time-Slicing
- Projects/Contexts: React Scheduler, useTransition, useDeferredValue
- Contradictions/Notes: 소스 내에 특별한 모순점은 발견되지 않았습니다. Lane Model은 과거 React의 동기식 차단(Synchronous Blocking) 렌더링의 한계를 극복하고 긴급한 상호작용과 긴급하지 않은 UI 전환을 효율적으로 분류하기 위해 Fiber 아키텍처와 함께 도입된 구조로 일관되게 설명되고 있습니다 [1-3, 11].
Last updated: 2026-04-25