Angular 20의 toSignal()과 신호 기반 API 심층 분석

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular 프레임워크를 사용하는 개발자, 특히 반응형 프로그래밍과 상태 관리에 관심 있는 중급~고급 개발자

핵심 요약

• toSignal()은 Observable을 Signal로 변환하여 Angular의 반응형 시스템에 통합하는 핵심 API
• requireSync: true는 동기식 Observable을 요구하고, initialValue는 비동기 스트림 초기값을 제공
• manualCleanup: true로 수동 구독 해제를 가능하게 하며, equal()은 신호 업데이트 조건을 커스터마이징

섹션별 세부 요약

1. toSignal() 개요

• toSignal()은 HTTP 요청, 상태 변화 등의 Observable을 Signal로 변환하여 반응형 데이터 흐름을 관리
• toSignal(source: Observable, options?: { initialValue?: unknown; requireSync?: boolean; manualCleanup?: boolean; injector?: Injector; equal?: ValueEqualityFn }): Signal
• 예제: JSON 파일에서 데이터를 불러오고 Signal로 변환하여 상태 업데이트

2. requireSync 옵션 사용

• requireSync: true는 즉시 동기식 데이터 발행을 요구
• of()는 동기식이지만, timer() 또는 HTTP는 비동기식으로 requireSync 사용 시 에러 발생
• 예: of([{ name: { common: 'Aruba' } }])은 requireSync과 호환되나, delay(500)은 비동기로 에러 유발

3. initialValue와 equal 함수

• initialValue는 Observable이 처음 값 발행 전까지 기본값 제공 (예: initialValue: 0)
• equal(prev: number, curr: number)는 신호 업데이트 조건 설정 (예: curr === 5일 때만 업데이트)

4. 인젝터와 수동 구독 해제

• injector를 명시적으로 전달해 비생성자 환경에서 toSignal() 사용 가능
• manualCleanup: true로 구독 해제 제어 (예: takeUntil(this._destroy$) 사용)

결론

• 동기식 Observable과 requireSync을 함께 사용하고, 비동기 스트림에는 initialValue를 제공하는 것이 최적
• equal()으로 신호 업데이트 조건 정의 및 manualCleanup을 통해 구독 해제 제어
• toSignal()은 Angular 20의 반응형 프로그래밍 모델을 획기적으로 개선한 핵심 기능