🛠️ 처음부터 만드는 Signal — 값이 바뀌면 자동으로 반응하기

Signal이 뭔가요?

Signal은 값을 감싸는 반응형 컨테이너입니다. 값이 바뀌면 그 값을 사용하는 곳이 자동으로 다시 실행됩니다. Solid.js, Angular, Preact 등 모던 프레임워크의 핵심 원시 타입이죠.

직접 만들어봅시다

```js
let currentEffect = null;
function createSignal(initialValue) {
let value = initialValue;
const subscribers = new Set();
const get = () => {
if (currentEffect) subscribers.add(currentEffect);
return value;
};
const set = (newValue) => {
if (Object.is(value, newValue)) return;
value = newValue;
for (const fn of subscribers) fn();
};
return [get, set];
}
function createEffect(fn) {
currentEffect = fn;
fn(); // 최초 실행으로 의존성 수집
currentEffect = null;
}
```

사용해보기

```js
const [count, setCount] = createSignal(0);
const [name, setName] = createSignal('혁');
createEffect(() => {
console.log(`${name()}님의 클릭: ${count()}회`);
});
// → "혁님의 클릭: 0회"
setCount(1); // → "혁님의 클릭: 1회"
setCount(2); // → "혁님의 클릭: 2회"
setName('민수'); // → "민수님의 클릭: 2회"
setCount(2); // Object.is 비교 → 출력 없음 (같은 값)
```

핵심 원리 3가지

1. 자동 추적: `get()`을 호출하는 순간, 현재 실행 중인 effect가 구독자로 등록됩니다
2. 자동 실행: `set()`으로 값이 바뀌면 등록된 모든 effect가 재실행됩니다
3. 동일 값 무시: `Object.is`로 비교해서 같은 값이면 불필요한 재실행을 방지합니다

더 나아가기

실제 프레임워크는 여기에 `createMemo`(파생 값), 배치 업데이트, effect 정리(cleanup), 순환 의존성 감지 등을 추가합니다. 하지만 핵심 아이디어는 이 30줄 안에 다 들어있습니다.
> 💡 이 패턴은 Observer 패턴의 진화형입니다. 구독을 명시적으로 하지 않아도 사용하는 것만으로 연결되는 것이 Signal의 마법입니다.