Files
2nd/10_Wiki/Topics/Frontend/Lane Model.md
T

105 lines
5.8 KiB
Markdown

---
id: wiki-2026-0508-lane-model
title: Lane Model
category: 10_Wiki/Topics
status: needs_review
canonical_id: self
aliases: []
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
tags: [uncategorized]
raw_sources: []
last_reinforced: 2026-05-08
github_commit: pending
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
tech_stack:
language: unspecified
framework: unspecified
---
# [[Lane Model|Lane Model]]
## 📌 한 줄 통찰 (The Karpathy Summary)
React의 Lane Model은 동시성 렌더링([[Concurrent Rendering|Concurrent Rendering]]) 및 작업 스케줄링을 관리하기 위해 도입된 정교한 우선순위 시스템입니다 [1]. 이 모델은 업데이트의 성격(예: 사용자 입력, 데이터 페칭 등)에 따라 작업에 각기 다른 우선순위(Lane)를 할당하여 중요한 UI 업데이트가 먼저 처리되도록 보장합니다 [2-4]. 각 Lane은 32비트 정수의 비트마스크(bitmask)로 표현되어 효율적인 우선순위 연산과 다중 우선순위 관리를 가능하게 합니다 [5].
## 📖 구조화된 지식 (Synthesized 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].
## 🔗 지식 연결 (Graph)
- **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*
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
**언제 이 지식을 쓰는가:**
- *(TODO)*
**언제 쓰면 안 되는가:**
- *(TODO)*
## 🧪 검증 상태 (Validation)
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
## 🧬 중복 검사 (Duplicate Check)
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음
## 🕓 변경 이력 (Changelog)
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|------|-----------|-----------|--------|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
## 💻 코드 패턴 (Code Patterns)
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
```text
# TODO
```
## 🤔 의사결정 기준 (Decision Criteria)
**선택 A를 써야 할 때:**
- *(TODO)*
**선택 B를 써야 할 때:**
- *(TODO)*
**기본값:**
> *(TODO)*
## ❌ 안티패턴 (Anti-Patterns)
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*