Observable(RxJS 라이브러리에서 제공)은 구독할 수 있는 시간에 따른 값의 스트림을 나타냅니다. Angular는 RxJS를 광범위하게 사용합니다. HTTP 요청, 라우터 이벤트, 폼, EventEmitter가 모두 Observable 기반이므로, 이를 이해하는 것은 필수적입니다.
Promise: 하나의 미래 값, eager, 취소 불가
Observable: 0개에서 여러 개의 값을 시간에 걸쳐, lazy (구독 시 실행), 취소 가능
Observable은 여러 값을 방출할 수 있고, 구독될 때만 실행되며, 구독 해제(취소)할 수 있습니다. 따라서 이벤트, 스트림, 그리고 취소하고 싶을 수 있는 HTTP에 이상적입니다.
import { HttpClient } from "@angular/common/http";
this.http.get<User[]>("/api/users").subscribe({
next: (users) => this.users = users, // 방출된 각 값
error: (err) => console.error(err), // 에러 시
complete: () => console.log("done"), // 스트림 완료
});
.subscribe()하기 전까지는 아무 일도 일어나지 않습니다. Observable은 lazy합니다.
import { map, filter, debounceTime } from "rxjs/operators";
this.searchInput.valueChanges.pipe(
debounceTime(300), // 입력이 멈출 때까지 대기
filter(text => text.length > 2), // 짧은 쿼리는 무시
map(text => text.trim()), // 변환
).subscribe(query => this.search(query));
연산자(.pipe() 안에서 연결됨)는 스트림을 선언적으로 변환합니다 — debounce, filter, map 등 — 일반적인 비동기 문제(타이핑하는 대로 검색하기 등)를 우아하게 해결합니다.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ 누수 방지
수동 구독은 ngOnDestroy에서 반드시 정리해야 합니다. 그렇지 않으면 컴포넌트가 사라진 후에도 계속 실행되어 메모리 누수가 됩니다. 일반적인 해결책: async pipe(자동 구독 해제) 또는 takeUntilDestroyed().
<!-- ✅ async pipe가 구독과 정리를 대신 처리해준다 -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observable은 Angular 전반에 짜여 있습니다. HttpClient, reactive forms, 라우터를 그것 없이 사용할 수 없습니다.
구독, 연산자, 특히 구독 해제(또는 수동 관리를 피하기 위한 async pipe 사용)를 이해하는 것은 중요합니다. 이는 비동기 데이터를 위한 Angular의 강력함의 원천이자 가장 흔한 함정(잊혀진 구독으로 인한 누수) 중 하나이기도 합니다.