Angular Academy · 강의

옵저버블과 구독

옵저버블 스트림을 만들고 구독합니다.

옵저버블과 구독은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

옵저버블이란

Observable은 시간에 따라 값이 흐르는 지연 스트림입니다. subscribe하기 전에는 아무 일도 일어나지 않습니다. 값이 0개 이상 방출된 후 완료되거나 오류가 발생할 수 있습니다.

RxJS는 Angular에 포함된 반응형 라이브러리로, HTTP, 이벤트, 타이머 같은 비동기 작업을 처리합니다.

옵저버블 만들기

Observable 생성자는 구독자 함수를 받습니다. 값을 방출하려면 next()를 호출하고, 종료하려면 complete()를 호출하며, 실패를 알리려면 error()를 호출합니다.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

옵저버블은 지연 실행됩니다

subscribe()를 호출하기 전에는 구독자 함수가 실행되지 않습니다. 각 구독은 새롭고 독립적인 실행을 시작합니다(콜드 옵저버블).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

생성 도우미: of와 from

생성자를 직접 사용하는 경우는 드뭅니다. of와 from 같은 도우미를 사용하면 옵저버블을 빠르게 만들 수 있습니다.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

interval 및 timer 생성기

interval은 일정한 주기로 증가하는 숫자를 방출하고, timer는 기다린 후 값을 방출합니다.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient는 옵저버블을 반환합니다

Angular에서 HttpClient 메서드는 옵저버블을 반환합니다. 구독할 때만 요청이 실행됩니다.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Subscription 객체

subscribe()는 Subscription을 반환합니다. 값 수신을 중단하고 리소스를 해제하려면 unsubscribe()를 호출하세요.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

완료와 구독 해제 비교

옵저버블이 complete()되거나 error()가 발생하면 자동으로 정리됩니다. 무한 스트림(interval, DOM 이벤트)은 직접 구독을 해제해야 합니다.

관찰자 간략 표기법

값에만 관심이 있다면 함수 하나만 전달하세요. 이 함수가 next 처리기가 됩니다.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

핫 옵저버블과 콜드 옵저버블(간단히)

콜드 옵저버블은 구독할 때 값 생성을 시작하며 구독자마다 별도의 실행을 합니다(HTTP, of, interval). 핫 옵저버블은 구독자와 관계없이 값을 생성하고 여러 구독자와 값을 공유합니다(다음에 Subject를 살펴봅니다).

빠른 확인

옵저버블에 대한 이해도를 확인해 보세요.

복습: 옵저버블과 구독

Observable은 subscribe()로 활성화하는 지연 스트림입니다.

next로 값을 방출하고, complete로 완료하며, error로 실패를 알립니다.
HttpClient 메서드는 옵저버블을 반환하며 구독할 때 실행됩니다.
메모리 누수를 방지하려면 무한 스트림의 구독을 해제하세요.

다음: Subject와 BehaviorSubject입니다.

자주 묻는 질문