2nd/10_Wiki/Topics/Frontend/컴포넌트 기반 웹 프레임워크 아키텍처 설계.md

---
id: wiki-2026-0508-컴포넌트-기반-웹-프레임워크-아키텍처-설계
title: 컴포넌트 기반 웹 프레임워크 아키텍처 설계
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Component Framework Architecture, Web Framework Design]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [frontend, architecture, framework-design, react, vue, svelte]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-19/vue-3.5/svelte-5
---

# 컴포넌트 기반 웹 프레임워크 아키텍처 설계

## 매 한 줄
> **"매 reactive component tree + diffing/scheduling 의 framework design"**. 매 React/Vue/Svelte 모두 (1) component model, (2) reactivity primitive, (3) rendering scheduler, (4) state management, (5) routing/data layer 의 5-layer stack. 매 2026 의 trend — fine-grained reactivity (Svelte 5 runes, Vue 3.5 Vapor, Solid signals) 의 dominant.

## 매 핵심

### 매 5-layer stack
1. **Component model**: function (React/Solid) vs SFC (Vue/Svelte) vs class.
2. **Reactivity primitive**: VDOM diff vs signals vs compile-time reactivity.
3. **Scheduler**: sync vs concurrent (React 19) vs microtask-batched.
4. **State**: local state, context, external store (Zustand, Pinia, Redux Toolkit).
5. **Data/routing**: Next.js App Router, Nuxt, SvelteKit, Remix.

### 매 reactivity spectrum (2026)
- **VDOM diff** (React, Preact): re-run component → diff → patch.
- **Fine-grained signals** (Solid, Svelte 5 runes, Vue 3.5 Vapor): track reads/writes, surgical DOM update.
- **Compile-time** (Svelte, Marko): compile component to imperative DOM ops.

### 매 응용
1. Internal framework / DSL design.
2. Framework-agnostic component library (Lit, Web Components).
3. Custom renderer (React Native, react-three-fiber, Ink).

## 💻 패턴

### 1. Minimal signal-based reactivity (~Solid)
```typescript
type Signal<T> = [() => T, (v: T) => void];
let currentSub: (() => void) | null = null;

function signal<T>(initial: T): Signal<T> {
  let value = initial;
  const subs = new Set<() => void>();
  const get = () => {
    if (currentSub) subs.add(currentSub);
    return value;
  };
  const set = (v: T) => { value = v; subs.forEach(s => s()); };
  return [get, set];
}

function effect(fn: () => void) {
  const run = () => { currentSub = run; fn(); currentSub = null; };
  run();
}
```

### 2. VDOM diff core (~Preact)
```typescript
interface VNode { type: string | Function; props: any; children: VNode[]; }

function diff(oldV: VNode | null, newV: VNode, parent: HTMLElement) {
  if (!oldV) parent.appendChild(create(newV));
  else if (oldV.type !== newV.type) parent.replaceChild(create(newV), parent.firstChild!);
  else updateProps(parent.firstChild as HTMLElement, oldV.props, newV.props);
}
```

### 3. Component as function (React-style)
```typescript
function Counter() {
  const [count, setCount] = useState(0);
  return h('button', { onClick: () => setCount(count + 1) }, `Count: ${count}`);
}
```

### 4. Compile-time reactivity (~Svelte 5 runes)
```svelte
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  $effect(() => { console.log(count); });
</script>
<button onclick={() => count++}>{count} / {doubled}</button>
```

### 5. Scheduler (concurrent React-like)
```typescript
const queue: Array<() => void> = [];
let scheduled = false;
function schedule(work: () => void) {
  queue.push(work);
  if (!scheduled) {
    scheduled = true;
    queueMicrotask(() => {
      while (queue.length) queue.shift()!();
      scheduled = false;
    });
  }
}
```

### 6. Custom renderer registry
```typescript
interface Renderer<HostNode> {
  createElement(type: string): HostNode;
  appendChild(parent: HostNode, child: HostNode): void;
  setProp(node: HostNode, key: string, value: unknown): void;
}
// React reconciler / Vue createRenderer 의 패턴.
```

### 7. Compound component pattern
```tsx
<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="a">A</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="a">...</Tabs.Content>
</Tabs>
```

## 매 결정 기준
| 상황 | Choice |
|---|---|
| Mass-market app | React 19 + Next.js 15 (ecosystem) |
| Performance-critical | Solid / Svelte 5 (signals) |
| Progressive enhancement | Astro + island arch |
| Web Components / portable | Lit |
| Embedded UI / DSL | Custom renderer atop React reconciler |

**기본값**: 매 React 19 + Server Components + Suspense (mass-market). 매 perf-bound 의 Solid/Svelte 5.

## 🔗 Graph
- 부모: [[Component-Composition|Component-Based Architecture]]
- 변형: [[Virtual_DOM과_Reconciliation|Virtual DOM]] · [[Fine-Grained Reactivity]]
- 응용: [[React]] · [[Solid]]
- Adjacent: [[State Management]] · [[Modern_Web_Rendering_and_Optimization|Server Components]] · [[Hydration]]

## 🤖 LLM 활용
**언제**: 새 framework / DSL 설계 시. 매 framework choice trade-off discussion 시.
**언제 X**: 매 단순 app 개발 — 매 ecosystem (Next.js, Nuxt) defaults 에 의존.

## ❌ 안티패턴
- **재발명 반복**: 매 production framework 와 경쟁 의도 — 매 절대 X.
- **VDOM 의 abuse**: 매 fine-grained 가 더 적합한 경우에도 VDOM 강행.
- **Scheduler omission**: 매 sync only — 매 large tree 의 long task 발생.
- **Tight coupling renderer ↔ reactivity**: 매 portability 상실.

## 🧪 검증 / 중복
- Verified (React 19, Vue 3.5 Vapor, Svelte 5 runes, Solid 1.x docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — 5-layer stack + 7 patterns + 2026 reactivity landscape |