Angular Signal이란 무엇인가요?

Question

Accepted Answer

**Signal**은 상태를 관리하기 위한 Angular의 reactive 원시 요소(Angular 16+에서 추가)입니다. 값을 감싸는 래퍼로, **값이 변경될 때 소비자에게 알려주어**, Zone.js change detection에 의존하지 않고도 세밀하고 효율적인 업데이트를 가능하게 합니다. ## signal 생성과 사용 ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // 쓰기 가능한 signal double = computed(() => this.count() * 2); // 파생 signal (자동 업데이트) increment() { this.count.set(this.count() + 1); // 새 값 설정 this.count.update(c => c + 1); // 또는 현재 값 기반으로 업데이트 } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // count가 변경될 때 다시 실행 }); } } ``` ## signal 읽기: 함수처럼 호출 ```html ``` signal은 일반 속성이 아니라 **호출하여 읽는다**(`count()`)는 점에 유의하세요. 템플릿에서 Angular는 뷰가 어떤 signal을 읽는지 정확히 추적하므로, signal이 변경될 때 영향받는 부분만 업데이트됩니다. ## 세 가지 signal 유형 ```text signal(value) → 쓰기 가능한 상태, .set() / .update()로 업데이트 computed(() => ...) → 파생/캐시된 값; 의존성이 변경되면 자동 재계산 effect(() => ...) → 읽은 signal이 변경될 때마다 부수 효과 실행 ``` `computed`는 lazy하고 캐시됩니다(Vue의 computed처럼). `effect`는 부수 효과를 reactive하게 실행합니다(watcher처럼). ## signal이 중요한 이유: 세밀한 reactivity ```text 전통적 Angular: 변경이 전체 컴포넌트 트리 검사를 트리거 (Zone.js) Signal: Angular는 변경된 signal에 의존하는 뷰를 정확히 안다 → 그것들만 업데이트 → 훨씬 효율적이고, "zoneless" Angular를 가능하게 함 ``` Signal은 Angular에 **정밀한 의존성 추적**을 제공합니다. signal이 변경되면, 실제로 그것을 읽는 뷰와 computed만 업데이트됩니다. 이는 Zone.js가 트리거하는 광범위한 change detection보다 효율적이며, Zone.js를 완전히 제거하는(zoneless 모드) 토대입니다. ## signal 기반 입력 (최신) ```ts name = input(); // signal로서의 @Input name = input.required(); ``` ## 왜 중요한가 Signal은 Angular reactivity의 가장 중요한 최근 진화입니다. 암묵적인 Zone.js change detection보다 더 단순하고, 더 명시적이며, 훨씬 효율적인 모델입니다. 세밀한 업데이트를 가능하게 하고, 불필요한 검사를 줄이며, computed/effect와 깔끔하게 통합되고, zoneless Angular로 가는 길을 닦습니다. Angular가 새로운 개발을 signal을 기본 상태 원시 요소로 이끌고 있기 때문에, signal을 이해하는 것이 점점 더 필수적입니다.