Signal 정리

Angular Signal은 Angular 16에서 도입된 새로운 반응형 프로그래밍 패러다임입니다. 기존의 Zone.js 기반 변경 감지 시스템을 보완하고, 더 효율적이고 예측 가능한 상태 관리를 제공합니다.

Signal의 핵심 개념

Signal은 값을 보유하고, 그 값이 변경될 때 의존하는 컴포넌트나 다른 Signal에 자동으로 알림을 보내는 반응형 데이터 구조입니다. 이는 세밀한 변경 감지를 가능하게 하여 성능을 크게 향상시킵니다.

기본 사용법

Signal 생성:

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

export class MyComponent {
  count = signal(0);  // 초기값 0
  name = signal('Angular');
}

 

 

Signal 값 읽기:

// 템플릿에서
{{ count() }}  // Signal은 함수처럼 호출

// 컴포넌트에서
console.log(this.count()); // 현재 값 출력

 

Signal 값 업데이트:

// 새 값으로 설정
this.count.set(5);

// 현재 값을 기반으로 업데이트
this.count.update(value => value + 1);

Computed Signal

다른 Signal들로부터 파생된 값을 자동으로 계산합니다:(ReadOnly signal)

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

export class MyComponent {
  firstName = signal('John');
  lastName = signal('Doe');
  
  // firstName이나 lastName이 변경되면 자동으로 재계산
  fullName = computed(() => 
    `${this.firstName()} ${this.lastName()}`
  );
}

Effect

Signal 변경에 반응하여 부수 효과를 실행합니다:

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

export class MyComponent {
  count = signal(0);
  
  constructor() {
    // count가 변경될 때마다 실행
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }
}

 

주요 장점

성능 개선: Zone.js 없이도 정확한 변경 감지가 가능하여 불필요한 렌더링을 줄입니다.

예측 가능성: 명시적인 의존성 추적으로 데이터 흐름을 쉽게 파악할 수 있습니다.

타입 안정성: TypeScript와 완벽하게 통합되어 컴파일 타임에 오류를 잡을 수 있습니다.

간단한 API: 직관적이고 학습하기 쉬운 API를 제공합니다.

실제 사용 예시

@Component({
  selector: 'app-todo',
  template: `
    <h2>할 일 목록 ({{ completedCount() }}/{{ todos().length }})</h2>
    <ul>
      @for (todo of todos(); track todo.id) {
        <li [class.completed]="todo.completed">
          {{ todo.title }}
        </li>
      }
    </ul>
  `
})
export class TodoComponent {
  todos = signal([
    { id: 1, title: '학습하기', completed: false },
    { id: 2, title: '코딩하기', completed: true }
  ]);
  
  completedCount = computed(() => 
    this.todos().filter(todo => todo.completed).length
  );
  
  addTodo(title: string) {
    this.todos.update(todos => [
      ...todos,
      { id: Date.now(), title, completed: false }
    ]);
  }
}

Angular Signal은 현재 개발자 프리뷰 단계이지만, 향후 Angular의 핵심 반응형 시스템이 될 예정입니다. Zone.js에서 벗어나 더 현대적이고 효율적인 상태 관리를 가능하게 하는 중요한 발전입니다.