2nd/10_Wiki/Topics/Frontend/차선 모델과 작업 우선순위 (Lane Model & Priorities).md

---
id: wiki-2026-0508-차선-모델과-작업-우선순위-lane-model-priori
title: "차선 모델과 작업 우선순위 (Lane Model & Priorities)"
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [React Lanes, Concurrent React, Scheduler priorities]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, scheduler, concurrent, lanes, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: React 19
---

# 차선 모델과 작업 우선순위 (Lane Model & Priorities)

## 매 한 줄
> **"매 React 18+ Concurrent renderer 의 internal priority system — 매 update 의 31-bit lane bitmask 로 매 batching + interleaving"**. 매 expiration time model 의 successor — 매 lane 의 multiple concurrent priority 의 단일 frame 내 처리. 매 user code 노출 X 매 hook (useTransition, useDeferredValue) 으로 활용.

## 매 핵심

### 매 lane 분류 (React 19)
- **SyncLane (1)**: 매 input event, click — 매 highest priority.
- **InputContinuousLane**: 매 drag, scroll — 매 60fps target.
- **DefaultLane**: 매 normal update.
- **TransitionLanes (multiple)**: useTransition 매 non-blocking.
- **RetryLanes**: 매 Suspense boundary retry.
- **IdleLane**: 매 background.

### 매 lane bitmask 의 의미
- 31-bit integer — 매 set bit 가 매 pending lane.
- 매 root.pendingLanes 매 work-in-progress 표현.
- 매 highest priority lane 부터 매 process.
- 매 batching: 매 동일 lane 의 update 합산.

### 매 user-facing API
- `useTransition()`: 매 isPending + startTransition.
- `useDeferredValue(value)`: 매 stale value 매 background commit.
- `<Suspense>`: 매 fallback 매 lane 분리.

### 매 응용
1. 매 search-as-you-type (input urgent + result transition).
2. 매 tab switching 매 stale UI 즉시 + new content 의 stream.
3. 매 large list render 매 chunk priority.

## 💻 패턴

### useTransition — 매 non-urgent update
```tsx
import { useState, useTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function onChange(e) {
    setQuery(e.target.value); // 매 urgent — input lane

    startTransition(() => {
      // 매 transition lane — interruptible
      setResults(searchData(e.target.value));
    });
  }

  return (
    <>
      <input value={query} onChange={onChange} />
      {isPending && <Spinner />}
      <ResultList results={results} />
    </>
  );
}
```

### useDeferredValue — 매 stale-while-update
```tsx
import { useDeferredValue, useState } from 'react';

function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  // 매 deferredText 는 lower priority lane 매 update

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <ExpensiveList query={deferredText} />
    </>
  );
}
```

### Suspense — 매 lane 분리
```tsx
<Suspense fallback={<Skeleton />}>
  <ProductDetails id={id} />
</Suspense>
```

### startTransition — 매 outside component
```tsx
import { startTransition } from 'react';

function navigate(url) {
  startTransition(() => {
    router.push(url);
  });
}
```

### 매 Server Action + transition (Next.js)
```tsx
'use client';
import { useTransition } from 'react';
import { likePost } from './actions';

function LikeButton({ postId }) {
  const [pending, start] = useTransition();
  return (
    <button
      disabled={pending}
      onClick={() => start(async () => { await likePost(postId); })}
    >
      {pending ? '...' : 'Like'}
    </button>
  );
}
```

### Scheduler — 매 lower-level
```javascript
import { unstable_scheduleCallback as schedule,
  unstable_NormalPriority as Normal,
  unstable_LowPriority as Low } from 'scheduler';

// 매 React 내부 — 일반적으로 사용 X
schedule(Low, () => doBackgroundWork());
```

### 매 transition + Suspense pattern
```tsx
function TabsContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function selectTab(next) {
    startTransition(() => setTab(next));
  }

  return (
    <>
      <TabBar current={tab} onSelect={selectTab} pending={isPending} />
      <Suspense fallback={<TabSkeleton />}>
        {tab === 'home' && <HomeTab />}
        {tab === 'profile' && <ProfileTab />}
      </Suspense>
    </>
  );
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 매 expensive list filter | useTransition |
| 매 stale UI ok 매 input | useDeferredValue |
| 매 async data | Suspense + transition |
| 매 navigation | startTransition + router |
| 매 click → instant feedback | 매 일반 setState (sync lane) |

**기본값**: 매 search/tab/nav 매 useTransition 으로 wrap.

## 🔗 Graph
- 부모: [[React]] · [[Concurrent Features|Concurrent Rendering]]
- 변형: [[useTransition]] · [[useDeferredValue]] · [[Suspense]]
- Adjacent: [[Fiber]]

## 🤖 LLM 활용
**언제**: 매 lag 매 input 매 transition 추천, 매 Suspense boundary 설계.
**언제 X**: 매 sync correctness 필요한 곳 (form submit 등).

## ❌ 안티패턴
- **모든 update 매 transition**: 매 input echo lag — sync lane 필요.
- **transition 안에 setQuery**: 매 input 매 stale — query 는 sync, results 만 transition.
- **Suspense 의 X 매 async**: 매 fallback 의 X 매 white screen.

## 🧪 검증 / 중복
- Verified (React docs, Andrew Clark talks, React 18 RFC).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Lane model, useTransition/useDeferredValue/Suspense 패턴 |