시그널 반응성 • Angular

Angular는 시그널(signal) 을 사용해서 상태를 만들고 관리합니다. 시그널은 어떤 값을 간단하게 감싸는 객체라고 생각하면 됩니다.

signal 함수를 사용하면 시그널을 생성하고 상태를 저장할 수 있습니다:

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

// `signal` 함수로 시그널을 생성합니다.
const firstName = signal('Morgan');

// `signal`은 그 자체로 함수입니다. 함수를 실행해서 값을 읽을 수 있습니다.
console.log(firstName());

// `set` 메서드를 사용하면 시그널의 값을 변경할 수 있습니다.
firstName.set('Jaime');

// `update` 메서드를 사용하면 기존 값을 참조해서 시그널의 값을 변경할 수 있습니다.
firstName.update((name) => name.toUpperCase());

Angular는 시그널이 어디에 사용되고 언제 갱신되는지 계속 추적합니다. 그래서 상태가 변경되면 DOM을 갱신하는 등 필요한 작업을 수행합니다. 이렇게 시그널 값이 변하는 것에 맞춰 반응하는 능력을 반응성(reactivity) 이라고 합니다.

연산 표현식

computed 함수는 기존에 있던 시그널을 참조해서 새로운 시그널을 생성하는 함수입니다.

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

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());

console.log(firstNameCapitalized()); // MORGAN

computed() 시그널은 읽을 수만 있습니다. 그래서 computed() 시그널에는 set 메서드와 update 메서드가 존재하지 않습니다. 그럼에도 computed() 시그널을 생성할 때 참조했던 시그널이 변경되면, computed로 생성한 시그널도 값이 갱신됩니다:

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

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());
console.log(firstNameCapitalized()); // MORGAN

firstName.set('Jaime');
console.log(firstNameCapitalized()); // JAIME

컴포넌트에서 시그널 활용하기

컴포넌트 상태를 관리하려면 signal 함수와 computed 함수를 사용하면 됩니다:

@Component({
  /* ... */
})
export class UserProfile {
  isTrial = signal(false);
  isTrialExpired = signal(false);
  showTrialDuration = computed(() => this.isTrial() && !this.isTrialExpired());

  activateTrial() {
    this.isTrial.set(true);
  }
}

팁: 시그널을 자세하게 알아보고 싶은가요? 그렇다면 시그널 심화 가이드 문서를 참고하세요.

다음 단계

이 문서에서는 동적 데이터를 선언하고 관리하는 방법을 알아봤습니다. 이제 이 데이터를 템플릿에 어떻게 사용하는지 알아봅시다.