Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

6.6 KiB

Raw Blame History

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

title

동시성 렌더링 (Concurrent Rendering)

매 한 줄

"매 render를 interruptible 하게". React 18+ 의 핵심 — render 작업을 chunk 로 쪼개서 user input 처리 우선. useTransition, Suspense, useDeferredValue 가 API. React 19 에서 Server Components / Actions 와 결합되어 SSR/streaming 의 표준이 됨.

매 핵심

매 무엇이 concurrent 인가

기존 (legacy): render 시작하면 매 끝까지 sync — 그 사이 user input X.
Concurrent: render 를 작은 chunk 로 — frame budget (5ms) 다 쓰면 yield → user input 처리 → 재개.
결과: typing/scroll 중에도 heavy render 가 막지 않음.

매 핵심 API

useTransition: state update 를 "transition" 으로 mark — interruptible, lower priority.
useDeferredValue: value 의 stale version 을 사용 — debounce 와 비슷하지만 schedule-aware.
Suspense: async boundary — use(promise) / lazy() 와 결합.
startTransition: hook 외부에서 transition 사용.
<Activity> (React 19+): hidden sub-tree 의 mount 유지 + render 안 함.

매 응용

Filter / search (타이핑 안 끊김).
Tab switching (heavy tab content async load).
Route navigation (이전 page 보여주며 next page prepare).
Streaming SSR (renderToReadableStream).

💻 패턴

useTransition for filter

function ProductList({ allProducts }: { allProducts: Product[] }) {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState(allProducts);
  const [isPending, startTransition] = useTransition();

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setQuery(e.target.value); // 매 high priority — input 즉시 반영
    startTransition(() => {
      setFiltered(allProducts.filter(p => p.name.includes(e.target.value)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        {filtered.map(p => <Row key={p.id} product={p} />)}
      </div>
    </>
  );
}

useDeferredValue for chart

function Dashboard({ filter }: { filter: string }) {
  const deferred = useDeferredValue(filter);
  // 매 chart re-render 는 typing 후에 처리됨.
  return <ExpensiveChart filter={deferred} />;
}

Suspense + use() (React 19)

function User({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // 매 promise 대기 → Suspense 가 fallback
  return <h1>{user.name}</h1>;
}

<Suspense fallback={<Skeleton />}>
  <User userPromise={fetchUser(id)} />
</Suspense>

Streaming SSR (Next.js / Remix)

// app/page.tsx
export default async function Page() {
  return (
    <>
      <Header /> {/* 매 즉시 stream */}
      <Suspense fallback={<Skeleton />}>
        <SlowFeed />  {/* 매 준비 되는대로 stream */}
      </Suspense>
    </>
  );
}

Route transition with startTransition

import { startTransition } from 'react';

function NavLink({ to }: { to: string }) {
  const navigate = useNavigate();
  return (
    <a onClick={(e) => {
      e.preventDefault();
      startTransition(() => navigate(to));
    }}>...</a>
  );
}

Activity (React 19) for tab persistence

<Activity mode={activeTab === 'feed' ? 'visible' : 'hidden'}>
  <Feed /> {/* 매 hidden 시 unmount X — state 보존, render 비용 0 */}
</Activity>

Avoiding tearing — useSyncExternalStore

const value = useSyncExternalStore(
  store.subscribe,
  store.getSnapshot,
  store.getServerSnapshot
);
// 매 concurrent rendering 중 store value 일관성 보장.

Optimistic update with useOptimistic (React 19)

function Likes({ post }: { post: Post }) {
  const [optimisticLikes, addLike] = useOptimistic(post.likes, (s, _) => s + 1);

  async function handleLike() {
    addLike(null); // 매 즉시 UI 반영
    await fetch(`/like/${post.id}`, { method: 'POST' });
  }

  return <button onClick={handleLike}>{optimisticLikes} likes</button>;
}

useActionState + form (React 19)

function Form() {
  const [state, action, isPending] = useActionState(submitAction, { error: null });
  return (
    <form action={action}>
      <input name="email" />
      <button disabled={isPending}>Submit</button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

매 결정 기준

상황	Approach
Typing → heavy filter	`useTransition` + filter 결과 stale 표시.
Heavy chart depends on input	`useDeferredValue`.
Async data	`Suspense` + `use(promise)`.
SSR	streaming + Suspense.
Tab UI	`<Activity>` hidden mode.
Form submission	`useActionState` + `useOptimistic`.

기본값: React 19 + Suspense (data) + useTransition (heavy state) + useDeferredValue (derived heavy).

🔗 Graph

부모: React · Rendering
변형: Suspense · Streaming SSR · Modern_Web_Rendering_and_Optimization
응용: useTransition · useDeferredValue · useOptimistic
Adjacent: Time_Slicing · Fiber

🤖 LLM 활용

언제: heavy render block UX, async data, streaming SSR, optimistic UX. 언제 X: 매 trivial render, sync logic only, React < 18.

❌ 안티패턴

startTransition for input value: 매 typing 의 setQuery 도 transition 으로 → input lag. value 는 즉시, derived state 만 transition.
Suspense without error boundary: error 시 무한 fallback — 매 ErrorBoundary 필수.
useDeferredValue + setState in effect: deferred 를 dep 로 → infinite loop.
Mixing legacy + concurrent: ReactDOM.render → ReactDOM.createRoot 로 migrate.
Side effect in render: concurrent 에서 render 가 여러 번 — pure 해야 함.
Read mutable external in render: useSyncExternalStore 사용 — tearing 방지.

🧪 검증 / 중복

Verified (React 19 docs, "React Internals" Dan Abramov, react.dev/learn).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — React 19 (use, Activity, useOptimistic, useActionState)

6.6 KiB Raw Blame History