피드로 돌아가기
Dev.toFrontend
원문 읽기
Angular가 Zone.js 기반 변경감지를 Signal 기반 세밀한 반응성으로 교체해 필요한 부분만 업데이트하는 구조로 전환
Angular Signals Have Changed Angular Forever — Here's the Complete Guide
AI 요약
Context
Zone.js는 애플리케이션의 모든 변경을 감지하기 위해 전역적으로 동작했다. 이로 인해 실제 변경되지 않은 부분도 검사 대상이 되어 예측 불가능한 성능 특성을 보였다.
Technical Solution
- Signal 원시형 도입:
signal()함수로 반응형 상태를 생성해 값이 변경될 때만 Angular에 알림 - Computed 값 자동 파생:
computed()함수로 Signal에 의존하는 파생 값을 선언하면 의존성이 변경될 때 자동 업데이트 - Effect 부수 효과 관리:
effect()함수로 Signal 값 변경 시 실행되는 콜백을 등록해 문서 제목 변경 등 처리 - Signal 기반 입출력:
input()함수로 부모 컴포넌트로부터 전달된 값을 Signal로 받고,output()함수로 자식에서 부모로 이벤트 전달 - SignalStore로 상태 관리:
@ngrx/signals의signalStore()로 상태, 파생값, 메서드를 조합해 스토어 패턴 구현
Impact
아티클에 정량적 성능 수치가 제시되지 않았다.
Key Takeaway
Signal은 명시적 의존성 선언을 통해 변경감지 범위를 필요한 부분으로 제한한다. 이 접근방식은 스케일이 커질수록 예측 가능한 성능을 보장하는 기반이 된다.
실천 포인트
Angular 애플리케이션에서 복잡한 상태 관리가 필요한 경우 Signal과 computed()를 조합하면 컴포넌트 수준의 수동 업데이트 로직을 제거하고 자동 추적 시스템을 구축할 수 있다. Signal 기반 inputs·outputs으로 마이그레이션하면 컴포넌트 간 데이터 흐름이 Signal 체계로 통일되어 일관성 있는 반응형 아키텍처를 구성할 수 있다.