frontend
JavaScript Signals 완벽 가이드 — 프레임워크를 초월한 반응형 상태의 미래
TC39 Signals 프로포절과 Angular, Solid, Vue, Preact가 채택한 Signals 패턴이 React의 useState와 어떻게 다른지, 그리고 웹 프레임워크의 미래를 어떻게 바꿀지 상세히 분석하였다.
- ·TC39 Signals 프로포절: Stage 1 (2024년)
- ·채택 프레임워크: Angular 16+, SolidJS, Vue 3, Preact Signals
- ·Signals 개념 기원: Knockout.js (2010년)
- ·React는 아직 Signals 미채택 — 대신 컴파일러 최적화 방향
Angular 17 프로젝트에서 Zone.js 기반 변경 감지를 Signals 기반으로 전환하면서 성능 프로파일링 결과가 눈에 띄게 개선되었다. 실시간 데이터 업데이트가 많은 대시보드에서 Zone.js의 불필요한 변경 감지 사이클이 사라지며 CPU 사용률이 30% 가량 감소하였다. SolidJS로 사이드 프로젝트를 진행하면서 Signals 개념을 더 깊이 이해하게 되었으며, React의 useState와 근본적으로 다른 실행 모델을 체험하는 좋은 기회가 되었다.
Signals란 무엇인가
반응형 프리미티브의 개념
Signal은 값을 보유하고 그 값이 변경될 때 의존하는 계산을 자동으로 업데이트하는 반응형 프리미티브이다. const count = signal(0)처럼 Signal을 생성하고, count.value로 값을 읽거나 count.value = 1로 값을 설정한다. Signal 값을 읽는 모든 계산식이나 Effect는 해당 Signal의 구독자가 되어, Signal 값이 변경될 때 자동으로 재실행된다. React의 useState와 가장 큰 차이는 Signals가 렌더링 사이클과 독립적으로 동작한다는 점이다. React는 상태 변경 시 컴포넌트 전체를 리렌더링하고 Virtual DOM 비교를 거치지만, Signals는 정확히 영향을 받는 DOM 노드만 업데이트한다.
Computed와 Effect의 역할
Signals 시스템은 세 가지 프리미티브로 구성된다. Signal은 읽고 쓸 수 있는 상태 값이다. Computed는 다른 Signal에 의존하는 파생 값으로, 의존 Signal이 변경될 때만 재계산된다. Effect는 Signal 값 변경에 반응하여 실행되는 사이드 이펙트로, DOM 업데이트나 로컬 스토리지 동기화에 사용된다. 이 세 가지 조합으로 복잡한 상태 의존 그래프를 명시적으로 표현할 수 있으며, 어떤 상태 변경이 어떤 계산에 영향을 미치는지 추적하기 쉬워진다.
주요 프레임워크의 Signals 구현
Angular Signals: Zone.js를 대체하는 미래
Angular 16에서 도입된 Angular Signals는 기존 Zone.js 기반의 변경 감지를 대체하는 핵심 기술이다. Zone.js는 모든 비동기 작업을 패치하여 변경 감지를 트리거하는 방식이었는데, 이 접근법은 예측하기 어려운 성능 문제를 유발하였다. Signals 기반의 변경 감지는 정확히 어떤 컴포넌트가 변경된 Signal을 참조하는지 추적하여 필요한 컴포넌트만 업데이트한다. Angular 18 이후 Signal-based components가 안정화되면서 Zone.js 없는 경량 Angular 앱을 구성하는 것이 가능해졌다.
SolidJS: 컴파일 타임 Signals 최적화
SolidJS는 가장 순수한 형태로 Signals를 구현한 프레임워크이다. React처럼 보이는 JSX 문법을 사용하지만 Virtual DOM이 존재하지 않는다. SolidJS 컴파일러가 JSX를 분석하여 Signal 의존성을 정적으로 파악하고, 최소한의 DOM 업데이트 코드를 생성한다. 벤치마크에서 SolidJS는 Svelte와 함께 가장 빠른 JavaScript 프레임워크로 꾸준히 상위권을 유지하고 있다. Ryan Carniato가 설계한 SolidJS의 Signals 구현은 TC39 Signals 프로포절의 참고 구현이 되었다.
TC39 Signals 프로포절과 React의 입장
표준 Signals의 가능성
TC39 Signals 프로포절은 JavaScript 언어 수준에서 공통 Signals 인터페이스를 정의하려는 시도이다. 각 프레임워크가 독자적인 Signals 구현을 갖는 대신, 표준 Signal 프리미티브를 기반으로 프레임워크 간 상태를 공유할 수 있게 하는 것이 목표이다. 2026년 현재 Stage 1 단계로 아직 표준화까지는 시간이 필요하지만, Angular·Solid·Vue·Preact 팀이 공동으로 추진하는 만큼 관심을 가지고 지켜볼 필요가 있다. React 팀은 Signals 대신 React Compiler를 통한 자동 메모이제이션 방향을 선택하여 차별화된 노선을 걷고 있다.
자주 묻는 질문
React에서도 Signals를 사용할 수 있나요?+
Preact Signals는 React 어댑터를 통해 React 프로젝트에서 사용할 수 있습니다. 다만 React 팀의 공식 지원이 아니므로, React Compiler가 성숙하면 Signals 대신 컴파일러 최적화를 활용하는 방향이 더 자연스러울 수 있습니다.
Signals를 배워야 하는 이유는 무엇인가요?+
Angular, Vue, Svelte, SolidJS 등 React 외의 프레임워크를 사용하거나 고려한다면 Signals 개념 이해가 필수입니다. TC39 표준화가 진행 중이므로 향후 JavaScript 생태계 전반에 영향을 미칠 가능성이 높습니다.
관련 글
Svelte 5 Runes 완벽 가이드 — 새로운 반응형 시스템으로의 전환
Svelte 5에서 도입된 Runes($state, $derived, $effect, $props)의 개념, 기존 Svelte 4와의 차이점, 마이그레이션 전략을 실무 예제와 함께 정리하였다.
Zustand vs Jotai — 2026년 React 상태 관리 라이브러리 완벽 비교
Redux의 시대가 저물고 Zustand와 Jotai가 React 생태계 상태 관리의 표준으로 자리잡은 2026년, 두 라이브러리의 차이와 선택 기준을 상세히 비교하였다.
React 19 use() 훅 완벽 가이드 — Promise와 Context를 다루는 새로운 방법
React 19에서 도입된 use() 훅의 Promise 처리 패턴, Context 읽기, Suspense와의 통합, 기존 데이터 페칭 방식과의 차이점을 정리하였다.