RxJS는 옵저버 패턴을 기반으로 하는 라이브러리로, 비동기 이벤트 스트림을 조작하고 관리하는데 사용됩니다.
이번 글에서는 RxJS의 핵심 개념 중 하나인 옵저버블(Observable)이 무엇인지, 어떻게 사용되는지, 그리고 TypeScript에서 어떻게 정의하고 활용하는지에 대해 알아보겠습니다.
목차
옵저버블이란?
옵저버블(Observable)은 비동기적인 데이터 스트림을 표현하는데 사용됩니다. 이 데이터 스트림은 여러 값 또는 이벤트들의 연속을 나타내며, 옵저버 패턴에서의 주제에 해당합니다. 즉, 데이터를 생성하고 그것을 받아들일 옵저버(Observer)에게 전달합니다.
RxJS의 옵저버블은 rxjs 패키지에서 Observable 클래스로 제공됩니다. 이 클래스는 데이터 스트림을 나타내며, 데이터가 발생할 때마다 옵저버들에게 이를 알리고 처리할 수 있도록 합니다.
옵저버블 사용하기
옵저버블을 사용하기 위해서는 rxjs 패키지를 프로젝트에 설치해야 합니다.
npm install rxjs
그리고 TypeScript 파일에서는 아래처럼 rxjs의 Observable 모듈을 import하여 사용할 수 있습니다.
import { Observable } from 'rxjs';
옵저버블 생성
이제 간단한 예제를 통해 옵저버블을 생성해보겠습니다. 아래는 1부터 5까지의 숫자를 발생시키는 예제입니다.
const numberObservable = new Observable<number>(subscriber => {
for (let i = 1; i <= 5; i++) {
subscriber.next(i);
}
subscriber.complete();
});
위 코드에서 Observable 클래스는 제네릭 타입을 받아들이며, 여기서는 number 타입을 받도록 선언했습니다. 그리고 subscriber에는 next() 메서드를 이용하여 값을 발행하고, complete() 메서드를 이용하여 옵저버블의 완료를 알립니다.
옵저버블 조작과 구독
옵저버블을 생성한 후에는 subscribe() 메서드를 사용하여 옵저버를 등록하고, 생성된 데이터 스트림을 처리할 수 있습니다.
numberObservable.subscribe({
next(value) { console.log(value); },
complete() { console.log('Completed!'); },
});
위의 예제에서 subscribe() 메서드를 이용하여 옵저버를 등록하고, next() 및 complete() 메서드를 이용하여 값이 발행될 때와 옵저버블이 완료될 때의 동작을 정의했습니다.
RxJS의 옵저버블은 이처럼 간단한 코드로 동작하는데, 이를 통해 비동기적인 데이터 스트림을 쉽게 다룰 수 있습니다.
이상으로 옵저버블에 대한 간단한 소개를 마치며, 다음 글에서는 옵저버블의 다양한 조작에 대해 자세히 알아보겠습니다.