Angular Signals 이해하기 — Angular에서 리액티비티의 미래

Source: Dev.to

Signals란 무엇인가요?

Signal은 특별한 반응형 변수입니다. 값이 변경되면 Angular가 자동으로 UI를 업데이트합니다—구독도, async 파이프도, 보일러플레이트도 필요 없습니다.

import { signal } from '@angular/core';

const counter = signal(0);
counter(); // returns 0

Signal을 상태 컨테이너로 생각하면 됩니다. 상태가 바뀔 때 “반응”합니다.

왜 Signals를 사용해야 할까요?

• 더 이상 수동 구독이 필요 없음 – subscribe()나 unsubscribe() 같은 번거로움이 사라집니다.
• 예측 가능한 UI 업데이트 – 영향을 받은 부분만 다시 렌더링됩니다.
• 컴포넌트 로직이 깔끔해짐 – Signal을 함수처럼 읽습니다: mySignal().
• 로컬 및 공유 상태에 모두 적합 – 컴포넌트 상태 관리를 크게 단순화합니다.

Angular에서 Signals 사용 방법

Signal 만들기

count = signal(0);

템플릿에서 읽기

Count: {{ count() }}

Signal 업데이트하기

increment() {
  this.count.update(value => value + 1);
}

새 값 설정하기

this.count.set(100);

Computed Signals

computed()를 사용하면 파생값을 자동으로 만들 수 있습니다.

fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

firstName이나 lastName이 변경될 때마다 fullName이 즉시 업데이트됩니다.

Effects – Signal이 변할 때 로직 실행하기

effect(() => {
  // 예시: API 호출, 로그 남기기, 상태 변화에 반응 등
});

Signals와 RxJS 비교

Signals는 RxJS를 대체하는 것이 아닙니다; RxJS가 과도하게 복잡하게 느껴질 수 있는 일반적인 경우를 단순화해 주지만, 고급 스트리밍 시나리오에서는 여전히 RxJS가 유용합니다.

---

Angular Signals는 현대적이고 가볍으며 매우 예측 가능한 반응성 모델을 Angular에 제공합니다. 작은 기능이든 대규모 애플리케이션이든, Signals를 사용하면 코드가 더 깔끔해지고 정신적 부담이 줄어듭니다. 아직 Signals를 사용해 보지 않았다면, 지금이 바로 시작하기에 완벽한 시점입니다—Angular 작업 흐름이 더 빠르고, 간단하며, 즐거워질 것입니다.