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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

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

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 분리

<Suspense fallback={<Skeleton />}>
  <ProductDetails id={id} />
</Suspense>

startTransition — 매 outside component

import { startTransition } from 'react';

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

매 Server Action + transition (Next.js)

'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

import { unstable_scheduleCallback as schedule,
  unstable_NormalPriority as Normal,
  unstable_LowPriority as Low } from 'scheduler';

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

매 transition + Suspense pattern

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 Rendering
• 변형: useTransition · useDeferredValue · Suspense
• 응용: Search UI · Tab Navigation
• Adjacent: React Scheduler · 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 패턴