Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

4.7 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

지연 렌더링(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 최소.

매 응용

Search-as-you-type (검색창 + 결과 리스트).
Tab switching (heavy panel).
Long list filtering / sorting.
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

4.7 KiB Raw Blame History