Angular Signals (1)

Angular Signals

Angular의 새로운 Reactivity 모델인 Signals는 상태 관리와 데이터 흐름을 효율적으로 처리하기 위한 강력한 도구입니다.

 

Signals 소개

Signals의 정의 및 특징

• Signal은 Reactivity 시스템의 핵심 구성 요소로, 상태(state)를 표현하는 객체입니다.
• 상태가 변경될 때 Signal은 이를 자동으로 추적하고, 필요한 컴포넌트나 로직을 다시 렌더링하거나 실행합니다.
• 주요 특징
  • Reactiveness: Signal은 상태의 변화를 자동으로 감지하고 알림을 발생시킵니다.
  • Composable: 다른 Signals와 쉽게 조합(composition)할 수 있습니다.
  • Type Safety: TypeScript를 통해 강력한 타입 검사를 지원합니다.

 

Angular의 Reactivity 시스템과의 차이점

기존 Angular Reactivity는 RxJS의 Observables를 주로 사용합니다.

그러나 RxJS는 학습 곡선이 가파르고 복잡성이 높은 반면, Signals는 다음과 같은 장점을 제공합니다:

• 간결성: API가 직관적이고 간단합니다.
• 동기화된 데이터 흐름: 상태가 즉각적으로 업데이트됩니다.
• 의존성 추적: Signal은 의존성을 자동으로 추적하고 관리합니다.

 

기본 사용법

Signal은 signal 함수를 통해 생성합니다.

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

// Signal 생성
const count = signal(0);

// Signal 읽기
console.log(count()); // 0

// Signal 업데이트
count.set(1);
console.log(count()); // 1

// Signal 수정
count.update(value => value + 1);
console.log(count()); // 2

 

Signal과 computed, effect의 기초

1. Computed: 다른 Signal을 기반으로 파생된 값을 계산합니다.

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

const count = signal(2);
const doubleCount = computed(() => count() * 2);

console.log(doubleCount()); // 4
count.set(3);
console.log(doubleCount()); // 6

 

 

2. Effect: Signal의 변경 사항에 반응하여 사이드 이펙트를 실행합니다.

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

const count = signal(0);
effect(() => {
  console.log(`Count changed: ${count()}`);
});

count.set(5); // 콘솔: "Count changed: 5"

 

 

Signals의 필요성

기존 Angular 상태 관리 방식의 한계

Angular에서 상태 관리는 주로 BehaviorSubject나 NgRx와 같은 외부 라이브러리에 의존했습니다.

하지만 이러한 방식은

• 복잡한 코드: RxJS의 연산자를 이해하고 사용하는 데 높은 학습 곡선이 필요합니다.
• 효율성 문제: 불필요한 재실행이나 메모리 누수가 발생할 가능성이 있습니다.

Signals를 사용했을 때의 이점

• 간단하고 직관적: 코드가 읽기 쉽고 유지보수가 용이합니다.
• 효율적: 의존성 추적이 자동으로 이루어지며, 불필요한 연산을 최소화합니다.
• Angular에 최적화: 프레임워크 레벨에서 완벽하게 통합되어 있습니다.