Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +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

Diffing Algorithm

매 한 줄

"매 VDOM diff = O(n) heuristic — 매 same-level node 의 비교 + key-based identity.". 매 React/Vue/Preact 모두 매 Levenshtein-style O(n³) 의 회피하기 위해 매 두 가정 (1) 다른 type = subtree 교체, (2) key가 child identity 의 hint. 매 React 19 (2024) Fiber + concurrent rendering, Vue 3.4 patchFlag-driven static hoist 의 진화.

매 핵심

매 두 가정 (Heuristics)

매 different element type ⇒ subtree 의 unmount + 재생성.
매 stable key ⇒ list reconciliation 의 identity hint.

매 알고리즘

React = Fiber tree, work loop가 매 cooperative scheduling 가능 (concurrent mode).
Vue 3 = compiled patchFlag (static / dynamic 분류) + LIS (Longest Increasing Subsequence) for keyed list.
Svelte/Solid = 매 VDOM 없음 — 매 fine-grained reactivity 의 directly DOM 의 patch.

매 응용

Keyed list — 매 stable key가 매 reorder cost 의 minimize.
Conditional render — 매 ternary가 매 type swap 의 발생.
Concurrent rendering — 매 high-priority update가 매 low-priority interrupt.

💻 패턴

1. Stable key (correct)

// CORRECT — id is stable identity
items.map((item) => <Row key={item.id} item={item} />)

// WRONG — index changes when list reorders
items.map((item, i) => <Row key={i} item={item} />)

2. Type swap forces unmount

{condition ? <div>A</div> : <span>A</span>}
// span/div type 다름 → subtree unmount + remount
// 같은 component reuse 원하면 같은 type 유지:
<div>{condition ? 'A' : 'B'}</div>

3. React Fiber priority lanes (19)

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();

const onChange = (e) => {
  setInput(e.target.value); // urgent
  startTransition(() => {
    setFilter(e.target.value); // can be interrupted
  });
};

4. Vue 3 patchFlag (compiled)

<!-- Source -->
<div>
  <span>{{ msg }}</span>
  <span class="static">hi</span>
</div>

<!-- Compiled (simplified) -->
<!-- 첫 span has patchFlag = 1 (TEXT) → diff only text -->
<!-- 두번째 span hoisted as static — 매 diff 건너뛰기 -->

5. Vue keyed list w/ LIS

<TransitionGroup tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.label }}</li>
</TransitionGroup>
<!-- Vue calculates LIS to minimize DOM moves -->

6. React.memo + structural equality

const Row = React.memo(({ item }: { item: Item }) =>
  <div>{item.label}</div>,
  (prev, next) => prev.item.id === next.item.id && prev.item.label === next.item.label,
);

7. Solid/Svelte alternative (no diff)

// Solid — fine-grained reactivity, no VDOM
import { createSignal } from 'solid-js';
const [count, setCount] = createSignal(0);
// JSX compiles to direct DOM ops; only `count()` text node updates
return <div>count: {count()}</div>;

8. Avoid layout-impacting reorder

// Stable order with key — only reorder DOM, no remount
<>{sorted.map((u) => <UserCard key={u.id} user={u} />)}</>
// Each UserCard preserves its instance (state, refs) on reorder.

매 결정 기준

상황	Approach
List render	매 stable id key — index X.
Heavy filter + input	useTransition + deferredValue.
Static UI	Vue patchFlag / React.memo.
Maximum perf	Solid / Svelte (skip VDOM).
Type-switch UI	wrap in same outer type to preserve children.

기본값: 매 React 19 + Suspense + Transition + 매 stable key.

🔗 Graph

부모: Virtual_DOM과_Reconciliation · Reconciliation
변형: React Fiber · Vue Reactivity
응용: Animation

🤖 LLM 활용

언제: 매 keyed-list bug 의 explain, 매 type-swap unmount 의 진단. 언제 X: 매 specific framework internal — 매 source code 의 read.

❌ 안티패턴

Index as key with reorder: 매 wrong identity → state mix.
Random key per render: 매 매 unmount + remount.
Inline objects/arrays as deps: 매 referential change → memo bypass.
Massive un-keyed list: 매 O(n) DOM ops 매 frame.

🧪 검증 / 중복

Verified (react.dev reconciliation, vuejs.org renderer, Solid docs).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — VDOM diff + Fiber + Vue patchFlag

4.7 KiB Raw Blame History