# [[Lane Model|Lane Model]]

## 📌 Brief Summary
React의 Lane Model은 동시성 렌더링([[Concurrent Rendering|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].
  * **우선순위 얽힘 (Ent[[ANGLE|ANGLE]]ment):** 우선순위가 낮은 업데이트가 높은 우선순위의 업데이트에 의존하는 경우, 두 Lane을 얽어(entangle) 함께 렌더링되도록 처리합니다 [4].
  * **다중 작업 진행 관리 (Multi-WIP [[Management|Management]]):** 단일 Fiber 노드가 각기 다른 Lane에 대해 여러 개의 진행 중인 작업(WIP, Work-In-Progress)을 가질 수 있으며, 스케줄러는 항상 가장 우선순위가 높은 WIP를 먼저 실행합니다 [8].

* **동시성 기능과의 연계:**
  이 모델은 `[[useTransition|useTransition]]` 및 `useDeferredValue`와 같은 [[React 19|React 19]]의 동시성 기능(Concurrent features)을 구현하는 핵심 기반입니다 [9, 10]. 이 기능들은 긴급하지 않은 무거운 연산의 우선순위를 낮춤으로써(우선순위가 높은 업데이트가 도착하면 하위 작업은 중단 및 연기됨), UI의 반응성을 지속적으로 유지할 수 있게 해줍니다 [4, 9, 10].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Fiber Architecture|React Fiber Architecture]], Concurrent Rendering, Reconciliation, [[Time-Slicing|Time-Slicing]]
- **Projects/Contexts:** React Scheduler, [[useTransition|useTransition]], [[useDeferredValue|useDeferredValue]]
- **Contradictions/Notes:** 소스 내에 특별한 모순점은 발견되지 않았습니다. Lane Model은 과거 React의 동기식 차단(Synchronous [[Blocking|Blocking]]) 렌더링의 한계를 극복하고 긴급한 상호작용과 긴급하지 않은 UI 전환을 효율적으로 분류하기 위해 Fiber 아키텍처와 함께 도입된 구조로 일관되게 설명되고 있습니다 [1-3, 11].

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