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()); // MORGANfirstName.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); }}
팁: 시그널을 자세하게 알아보고 싶은가요? 그렇다면 시그널 심화 가이드 문서를 참고하세요.
다음 단계
이 문서에서는 동적 데이터를 선언하고 관리하는 방법을 알아봤습니다. 이제 이 데이터를 템플릿에 어떻게 사용하는지 알아봅시다.