2nd/10_Wiki/Topics/AI_and_ML/Virtual_DOM과_Reconciliation.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-virtual-dom과-reconciliation	Virtual DOM과 Reconciliation	10_Wiki/Topics	verified	self	VDOM React Fiber Virtual DOM	none	A	0.93	applied	react frontend rendering vdom fiber signals		2026-05-10	pending	language framework typescript React-19

Virtual DOM과 Reconciliation

매 한 줄

"매 UI 의 in-memory tree (VDOM) 의 매 diff → 매 minimal real-DOM mutation 만 commit." React 가 2013년 도입 → 2017년 Fiber rewrite → 2024년 React 19 (compiler) 로 evolve. 매 2026 은 매 fine-grained reactivity (SolidJS, Svelte 5 runes) 와 매 architectural rivalry — 매 VDOM 의 default 지위 의 erosion.

매 핵심

매 VDOM 작동

1. Render: JSX → VDOM tree (object literal).
2. Diff (reconcile): prev tree vs next tree 의 비교 — 매 O(n) heuristic.
3. Commit: minimal real-DOM operation 의 batch apply.

매 React Fiber (2017+)

• Unit of work: 매 fiber node — 매 component 의 단위.
• Interruptible: 매 work loop 가 매 yield 가능 — 매 priority-based scheduling.
• Double buffering: current tree + work-in-progress tree.
• Lanes (2020): priority bitmask — sync, transition, idle.

매 Reconciliation heuristic

• Different element type → 매 unmount + remount: <div> → <span> 매 subtree throw.
• Same type → 매 props update: attribute diff 만.
• Key: list 의 stable identity — 매 key 없으면 매 index-based, 매 잘못된 reuse.

매 2026 alternatives

• SolidJS signals: 매 VDOM X — 매 fine-grained dependency tracking. 매 update 가 매 mutation site 직접.
• Svelte 5 runes: 매 compile-time reactivity — 매 runtime overhead 최소.
• Vue 3.5 (Vapor mode): 매 VDOM-less compile target — opt-in.
• React 19 compiler: 매 manual memoization (useMemo, useCallback) 의 elimination — 매 VDOM 유지하되 매 cost 감소.

매 응용

1. SPA: React, Preact, Inferno — 매 VDOM 기반.
2. Server components (RSC): 매 server 에서 render → 매 wire format → 매 client hydrate.
3. Cross-platform: React Native, Lynx — 매 VDOM 의 platform-agnostic 의 leverage.

💻 패턴

매 minimal VDOM (educational)

type VNode = { type: string; props: Record<string, any>; children: (VNode | string)[] };

function h(type: string, props = {}, ...children: (VNode | string)[]): VNode {
  return { type, props, children };
}

function diff(prev: VNode | null, next: VNode | null, parent: HTMLElement, index = 0) {
  if (!prev) {
    parent.appendChild(render(next!));
  } else if (!next) {
    parent.removeChild(parent.childNodes[index]);
  } else if (prev.type !== next.type) {
    parent.replaceChild(render(next), parent.childNodes[index]);
  } else if (typeof next === "object") {
    updateProps(parent.childNodes[index] as HTMLElement, prev.props, next.props);
    const len = Math.max(prev.children.length, next.children.length);
    for (let i = 0; i < len; i++) {
      diff(prev.children[i] as VNode, next.children[i] as VNode,
           parent.childNodes[index] as HTMLElement, i);
    }
  }
}

매 React Fiber priority (lanes)

import { startTransition, useDeferredValue } from "react";

function SearchBox() {
  const [query, setQuery] = useState("");
  const deferred = useDeferredValue(query);  // 매 low-priority lane

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ExpensiveResults query={deferred} />
    </>
  );
}

// 매 startTransition: 매 non-urgent state update
function tabSwitch(newTab: Tab) {
  startTransition(() => setActiveTab(newTab));
}

매 key 의 올바른 사용

// 매 BAD: index key — 매 reorder 시 매 잘못된 reuse
{items.map((item, i) => <Row key={i} {...item} />)}

// 매 GOOD: stable id
{items.map(item => <Row key={item.id} {...item} />)}

// 매 reorder edge case: 매 form input state 의 보존 의 보장

매 SolidJS signal (no VDOM)

import { createSignal, createMemo, For } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = createMemo(() => count() * 2);

  // 매 JSX 가 매 reactive primitive 로 compile
  // 매 setCount 호출 시 매 doubled 만 update — 매 component re-render X
  return <button onClick={() => setCount(c => c + 1)}>{doubled()}</button>;
}

매 React 19 compiler (auto-memo)

// 매 React 19 compiler enabled — 매 useMemo / useCallback 불필요
function Parent({ items }: { items: Item[] }) {
  const sorted = items.toSorted((a, b) => a.score - b.score);
  // 매 compiler 가 매 dependency analysis → 매 auto-memo
  return sorted.map(item => <Child key={item.id} item={item} />);
}

매 RSC (server component)

// 매 server component — 매 zero JS shipped
async function ProductPage({ id }: { id: string }) {
  const product = await db.product.findUnique({ where: { id } });
  return (
    <article>
      <h1>{product.name}</h1>
      <ClientCart product={product} />  {/* 매 client island */}
    </article>
  );
}

매 reconciliation profiling

import { Profiler } from "react";

<Profiler id="App" onRender={(id, phase, actualDuration) => {
  if (actualDuration > 16) {
    console.warn(`매 slow render: ${id} took ${actualDuration}ms`);
  }
}}>
  <App />
</Profiler>

매 결정 기준

상황	Approach
매 large existing React codebase	매 React 19 + compiler
매 new SPA, performance-critical	매 SolidJS or Svelte 5
매 SEO + dynamic	매 Next.js 15 (RSC) or Remix
매 enterprise, 매 ecosystem 우선	매 React (libraries · talent pool)
매 Vue ecosystem 매 lock-in	매 Vue 3.5 + Vapor mode

기본값: 매 generic web app 매 React 19 + Vite or Next.js 15.

🔗 Graph

• 부모: Frontend Frameworks · DOM · Reconciliation
• 변형: React Fiber · Preact · Inferno
• 응용: Next.js · Remix · React Native · React Server Components
• Adjacent: SolidJS · Svelte · Signals · Vue Vapor

🤖 LLM 활용

언제: 매 React component 의 generation — 매 LLM 이 매 JSX + hooks 패턴 의 well-trained. 언제 X: 매 fiber 의 internal debugging — 매 LLM 의 stale knowledge 의 risk.

❌ 안티패턴

• 매 index as key: 매 list reorder 시 매 wrong state.
• 매 inline object props: 매 매 render 마다 매 new ref → 매 child memo 무효 (compiler 이전).
• 매 huge component tree: 매 single render 가 매 thousands node — 매 split 안 함.
• 매 useMemo 남용 (React 19 이전): 매 미세 update 의 over-memo — 매 measure 없이 의 cargo cult.
• 매 setState in render: 매 infinite loop.

🧪 검증 / 중복

• Verified (React docs 2026; "React Fiber Architecture" by Andrew Clark; SolidJS docs; Svelte 5 release notes).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Fiber, React 19 compiler, signals 비교 추가