docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,164 @@
|
||||
---
|
||||
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 |
|
||||
Reference in New Issue
Block a user