2nd/10_Wiki/Topics/Frontend/지연 렌더링(Deferred Rendering).md

---
id: wiki-2026-0508-지연-렌더링-deferred-rendering
title: 지연 렌더링(Deferred Rendering)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Deferred Rendering, Lazy Rendering, useDeferredValue, Concurrent Rendering]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [frontend, performance, react, concurrent-rendering]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react
---

# 지연 렌더링(Deferred Rendering)

## 매 한 줄
> **"매 expensive render 를 매 user input 의 responsiveness 보다 매 뒤로 미룬다"**. 매 React 18+ 의 concurrent rendering 이 매 native 한 deferral 을 제공 — `useDeferredValue`, `useTransition`, `Suspense` 가 매 trio. 매 typing latency 와 매 result list 의 update 를 매 분리해 매 INP < 200ms 달성.

## 매 핵심

### 매 두 종류
- **Time deferral (concurrent)**: useTransition / useDeferredValue 로 매 low-priority work 를 매 schedule.
- **Visibility deferral (lazy)**: IntersectionObserver, content-visibility 로 매 off-screen render skip.

### 매 메커니즘
- React scheduler 가 매 5ms budget 단위 로 매 yield → 매 main thread 자유.
- High-priority (input, click) 는 매 즉시, low-priority (list re-render) 는 매 idle 시점.
- React 19 의 매 automatic batching 과 결합 → 매 render churn 최소.

### 매 응용
1. Search-as-you-type (검색창 + 결과 리스트).
2. Tab switching (heavy panel).
3. Long list filtering / sorting.
4. Off-screen image / video / iframe.

## 💻 패턴

### useDeferredValue (입력 즉시, 결과 지연)
```tsx
function Search() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {/* 매 input 은 매 즉시, list 는 매 deferred */}
      <SlowResults query={deferredQuery} />
    </>
  );
}
```

### useTransition (state update 를 transition 으로)
```tsx
const [tab, setTab] = useState("home");
const [isPending, startTransition] = useTransition();

const handleTab = (next: string) => {
  startTransition(() => setTab(next)); // 매 heavy switch
};

return (
  <>
    {isPending && <Spinner />}
    <TabPanel name={tab} />
  </>
);
```

### Suspense 로 streaming
```tsx
<Suspense fallback={<Skeleton />}>
  <SlowDataView />
</Suspense>
```

### React.lazy + dynamic import
```tsx
const Editor = lazy(() => import("./RichTextEditor"));
return (
  <Suspense fallback={<EditorSkeleton />}>
    <Editor />
  </Suspense>
);
```

### content-visibility (CSS-level skip)
```css
.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
```

### IntersectionObserver 기반 lazy mount
```tsx
function LazyMount({ children }: { children: ReactNode }) {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return <div ref={ref}>{visible ? children : null}</div>;
}
```

### Virtualized list (TanStack Virtual)
```tsx
const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 40,
});
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Typing → expensive render | useDeferredValue |
| Tab/route 전환 heavy | useTransition |
| Below-fold heavy section | content-visibility: auto |
| 1000+ row list | TanStack Virtual |
| Code split heavy editor | React.lazy + Suspense |

**기본값**: useDeferredValue (typing) + useTransition (navigation) + content-visibility (off-screen).

## 🔗 Graph
- 부모: [[Concurrent Features|Concurrent Rendering]]
- 변형: [[useTransition]] · [[useDeferredValue]] · [[Suspense]]
- 응용: [[Virtualization]]
- Adjacent: [[Code Splitting]] · [[Critical Rendering Path (CRP)|Critical Rendering Path]]

## 🤖 LLM 활용
**언제**: 매 input lag, 매 INP > 200ms, 매 large list, 매 heavy chart.
**언제 X**: 매 small static UI, 매 SSR-only.

## ❌ 안티패턴
- **모든 update 를 transition 으로**: 매 critical update 도 지연 → 매 stale UI.
- **useDeferredValue + heavy memo 부재**: 매 child 가 매 매번 재렌더.
- **Suspense 없이 React.lazy**: 매 fallback 미정 → crash.

## 🧪 검증 / 중복
- Verified (React 19 docs, web.dev INP guide).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — deferred rendering 7 patterns |