🛠️ 처음부터 만드는 Reactive Signal — SolidJS/Angular 자동 의존성 추적 25줄 구현

React는 Virtual DOM, Svelte는 컴파일러.
그리고 Signal은 제3의 반응성 모델이다.
SolidJS, Angular, Preact가 모두 채택한 이 패턴 —
의존성을 자동 추적하고, 값이 바뀌면 딱 필요한 곳만 업데이트한다.

핵심 구현

```typescript
let currentEffect: (() => void) | null = null;
function createSignal(initial: T) {
let value = initial;
const subs = new Set<() => void>();
const get = () => {
if (currentEffect) subs.add(currentEffect);
return value;
};
const set = (next: T) => {
value = next;
subs.forEach(fn => fn());
};
return [get, set] as const;
}
function createEffect(fn: () => void) {
const execute = () => {
currentEffect = execute;
fn();
currentEffect = null;
};
execute();
}
function createMemo(fn: () => T) {
const [get, set] = createSignal(undefined as T);
createEffect(() => set(fn()));
return get;
}
```

사용 예시

```typescript
const [count, setCount] = createSignal(0);
const [mult, setMult] = createSignal(2);
const doubled = createMemo(() => count() * mult());
createEffect(() => console.log(`결과: ${doubled()}`));
// → "결과: 0"
setCount(5); // → "결과: 10"
setMult(3); // → "결과: 15"
```

핵심 트릭: 전역 스택

`doubled`는 `count`와 `mult` 둘 다 자동 추적한다.
비결은 `currentEffect` 전역 변수.
Signal의 `get()`이 호출되는 순간 "누가 나를 읽는지" 기록하고,
`set()`으로 값이 바뀌면 그 구독자들만 재실행한다.
React의 `useEffect` deps 배열? 여기선 필요 없다.
읽기만 하면 자동 구독이다.