🛠️ 처음부터 만드는 Signal — Preact Signals-style 반응형 상태 원시값 25줄 구현

왜 Signal인가?

React `useState`는 컴포넌트 단위로 리렌더링.
Signal은 값이 바뀐 곳만 정확히 반응합니다.
Preact Signals, SolidJS, Angular 모두 이 원리.

핵심 구현 (25줄)

```js
let tracking = null;
function signal(init) {
let v = init, subs = new Set();
return {
get value() { tracking?.add(subs); return v; },
set value(n) { if (n === v) return; v = n; [...subs].forEach(f => f()); },
subscribe(fn) { subs.add(fn); return () => subs.delete(fn); },
};
}
function computed(fn) {
const c = signal(undefined);
effect(() => (c.value = fn()));
return { get value() { return c.value; } };
}
function effect(fn) {
const run = () => {
tracking = new Set();
fn();
const deps = tracking; tracking = null;
deps.forEach(s => s.add(run));
};
run();
}
```

사용법

```js
const count = signal(0);
const doubled = computed(() => count.value * 2);
effect(() => console.log(`count=${count.value}, x2=${doubled.value}`));
// → "count=0, x2=0"
count.value = 5;
// → "count=5, x2=10" 자동 재실행!
```

핵심 원리

| 개념 | 역할 |
|------|------|
| `signal` | 반응형 값. getter에서 의존성 자동 추적 |
| `computed` | 파생 값. 의존 signal 변경 시 자동 재계산 |
| `effect` | 부수효과. 읽은 signal 변경 시 자동 재실행 |
자동 추적의 비밀: `effect` 실행 중 접근한 signal의 `subs`가 `tracking`에 기록 → 실행 완료 후 해당 signal들에 effect 구독 등록 → 값 변경 시 자동 재실행.
`useState` 없이도 세밀한 반응형 업데이트가 가능한 이유, 25줄로 이해하세요.