Svelte의 반응성 원리와 신호(Signals) 이해하기

Svelte 반응성의 오해와 진실

많은 사람들이 Svelte의 반응성을 '마법'처럼 여긴다. 하지만 실제로는 컴파일러의 미묘한 트릭이 아니라 신호(Signals)라는 개념을 활용한다. Svelte는 상태가 바뀌면 해당 값에 의존하는 부분만 자동으로 갱신되게 설계되어 있다.

신호(Signals)란 무엇인가?

Signals는 값을 가진 관찰 가능한 객체로, 변경되면 자동으로 연결된 함수들을 실행해주는 역할을 한다. 사용자는 값을 읽거나, 쓰거나, 이 값에 의존하는 구간을 명확하게 알 수 있다. 기존의 옵저버 패턴과 달리, 효과(Effect)를 통해 구독 과정을 자동화한다.

Svelte의 신호 구현 원리

코드에서 변수에 재할당이 발생할 때 Svelte는 이를 신호로 변환한다. 신호는 내부적으로 value와 구독자(subscribers)를 가진 객체이며, 값이 변경될 때 자동으로 연결된 함수를 실행한다.

function state(value) {
  const signal = {
    value,
    subscribers: new Set(),
  };
  return signal;
}

의존성 추적과 자동 감지

효과를 생성할 때, Svelte는 현재 어떤 함수가 실행 중인지 추적한다. 신호의 값을 읽으면, '누가 호출했는지' 기록하여 나중에 값이 바뀔 때 해당 함수만 자동 실행된다. 이렇게 함으로써 수동적인 구독 또는 이벤트 처리 과정 없이, 연관된 부분만 정확히 업데이트가 이루어진다.

신호, 파생값, 효과의 관계

반응성 시스템에서는 세 가지 요소가 중요하다. 원천(Sources)은 상태의 원래 값, 파생(Derivations)은 여러 값을 바탕으로 만든 새로운 값, 효과(Effects)는 값이 바뀔 때 수행되는 동작이다. 전체 구조가 그래프 형태로 연결되어 있어 값이 바뀌면 관련된 파생과 효과만 업데이트된다.

신호와 기존 옵저버 패턴의 차이

이전의 옵저버 패턴은 명시적으로 구독자 함수를 등록하고 수동으로 업데이트했다. 반면, Svelte의 신호는 값을 읽는 순간 자동으로 구독하며, 신호가 변경될 때 자동으로 연결된 모든 함수가 재실행된다. 코드가 훨씬 단순해진다.

파생값(derived) 구현 방식

파생값은 원천에서 값을 받아 새로운 신호를 만드는 방식이다. 파생값 역시 내부적으로 신호와 효과를 활용해서, 의존하는 값이 변경될 때마다 다시 계산된다.

export function derived(fn) {
  const signal = state(fn());
  effect(() => set(signal, fn()));
  return signal;
}

반응성 그래프의 최적화

값이 바뀔 때마다 전체를 다시 계산하지 않는다. 실제로는 의존성 그래프를 활용해 '더러워진'(dirty) 부분만 표시하고, 일정한 시점에만 전체 효과를 실행한다. 이렇게 하면 불필요한 DOM 업데이트나 연산이 방지된다.

Svelte의 반응성은 "그냥 자바스크립트"가 아니다

Svelte가 실제로 컴파일된 코드를 살펴보면, 자동화된 효과와 신호 시스템 덕분에 복잡한 추상화 없이도 마치 일반 자바스크립트처럼 직관적으로 동작한다. 동시에 개발 경험을 극대화하는 최적화가 적용되어 있다.

비동기 및 복잡한 효과의 처리

Svelte는 비동기 작업이나 조건부 렌더링 등의 복잡한 상황에서도 반응성 효과 관리가 잘 이루어지도록 추가적인 그래프를 사용한다. 예를 들어, 비동기 상태가 완료될 때까지 특정 DOM 변경이나 효과 실행을 잠시 대기시키는 구조로 이루어져 있다.

Source & Reference :