2nd/10_Wiki/Topics/Frontend/지연 렌더링(Deferred Rendering).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-지연-렌더링-deferred-rendering	지연 렌더링(Deferred Rendering)	10_Wiki/Topics	verified	self	Deferred Rendering Lazy Rendering useDeferredValue Concurrent Rendering	none	A	0.9	applied	frontend performance react concurrent-rendering		2026-05-10	pending	language framework typescript 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 (입력 즉시, 결과 지연)

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 으로)

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

<Suspense fallback={<Skeleton />}>
  <SlowDataView />
</Suspense>

React.lazy + dynamic import

const Editor = lazy(() => import("./RichTextEditor"));
return (
  <Suspense fallback={<EditorSkeleton />}>
    <Editor />
  </Suspense>
);

content-visibility (CSS-level skip)

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

IntersectionObserver 기반 lazy mount

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)

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
• 변형: useTransition · useDeferredValue · Suspense
• 응용: Virtualization
• Adjacent: Code Splitting · Critical Rendering Path (CRP)

🤖 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