Angular RxJS Observables 기본 실전 예제

Angular에서 RxJS 옵저버블의 개념 이해하기

리액티브 프로그래밍은 비동기 데이터 스트림을 기반으로 하는 프로그래밍 방식입니다. 이 paradigm은 데이터의 흐름을 시간축에 따라 관리하며, 한마디로 모든 것을 데이터 스트림으로 간주합니다. 이러한 방식은 동기적 데이터와 비동기적 데이터를 통합하여 일관된 방법으로 처리할 수 있도록 돕습니다.

리액티브 프로그래밍의 이점

전통적인 프로그래밍 방식에서는 동기 데이터와 비동기 데이터를 각기 다르게 처리하지만, 리액티브 프로그래밍은 이러한 데이터를 하나의 연속적인 데이터 스트림으로 다룹니다. 데이터 스트림을 구독함으로써 상태 변화에 반응하는 애플리케이션을 만들 수 있습니다.

예를 들어, TV 방송국과 TV의 관계를 통해 이를 설명할 수 있습니다. 방송국은 연속적인 영상 프레임을 방출하고, TV는 이러한 프레임을 수신하여 화면에 표시합니다. 이 경우 TV 방송국은 옵저버블이며, TV는 옵저버입니다. 즉, 방송국이 방출하는 데이터 스트림을 TV가 구독하여 표시하는 방식입니다.

RxJS와 옵저버블의 기초

RxJS는 자바스크립트 라이브러리로, 비동기 데이터 스트림을 처리하는 데 도움을 줍니다. 옵저버블은 비동기적으로 데이터를 스트리밍하는 객체로, 옵저버는 이러한 데이터를 구독하고 처리합니다. 옵저버블의 상태가 변화하면, 이를 자동으로 옵저버에게 전달합니다.

• 옵저버블 (Observable): 데이터 스트림을 생성하고 방출하는 객체.
• 옵저버 (Observer): 옵저버블의 데이터를 구독하여 처리하는 객체.

옵저버블과 옵저버의 관계

옵저버블은 데이터를 연속적으로 방출하며, 옵저버는 이러한 방출된 데이터를 실시간으로 받아 처리합니다. 옵저버는 subscribe 메소드를 통해 옵저버블을 구독하게 되며, 이를 통해 옵저버블이 방출한 데이터를 획득합니다.

아래는 간단한 옵저버블을 생성하고 구독하는 예제 코드입니다:

javascript
import { Component, OnInit } from ‘@angular/core’;
import { Observable } from ‘rxjs’;
@Component({
selector: ‘app-root’,
template: ”
})
export class AppComponent implements OnInit {
ngOnInit() {
const subscriber = (observer) => {
try {
observer.next(1); // 데이터 방출
observer.next(2); // 데이터 방출
observer.complete(); // 스트림 종료
} catch (e) {
observer.error(e); // 에러 방출
}
};
const observable = new Observable(subscriber);
observable.subscribe(
value => console.log(value), // 데이터 수신
error => console.error(error), // 에러 처리
() => console.log(‘Complete’) // 완료 메시지
);
}
}

위 코드에서는 옵저버블을 생성하고, 데이터를 방출하는 로직을 정의했습니다. 이러한 방식으로 각 데이터 항목을 쉽게 처리할 수 있습니다.

고차 옵저버블과 고차 매핑 연산자

고차 옵저버블(higher-order observable)이라는 개념은 옵저버블이 또 다른 옵저버블을 방출할 수 있다는 것입니다. 이를 통해 복잡한 데이터 흐름을 간소화할 수 있습니다.

고차 매핑 연산자(예: switchMap, mergeMap)는 이러한 고차 옵저버블을 쉽게 처리할 수 있도록 돕습니다. 각 고차 매핑 연산자는 내부 옵저버블을 자동으로 구독하고, 결과를 평면화하여 출력 옵저버블로 내보냅니다.

고차 매핑 연산자의 예시

예를 들어, mergeMap 연산자는 동시에 여러 내부 옵저버블을 실행하고, 각각의 결과를 병합하여 출력 옵저버블에 내보내는 기능을 수행합니다. 아래는 이와 관련된 예시입니다:

javascript
import { of } from ‘rxjs’;
import { mergeMap } from ‘rxjs/operators’;
import { HttpClient } from ‘@angular/common/http’;
constructor(private http: HttpClient) {}
getData(ids: number[]) {
const source$ = of(…ids); // ID 배열
const result$ = source$.pipe(
mergeMap(id => this.http.get(https://api.example.com/data/${id})) // 내부 옵저버블을 생성
);
result$.subscribe(data => {
console.log(data); // API 응답 데이터 처리
});
}

위의 예시에서는 ID 배열을 방출하는 옵저버블을 생성하고, 각 ID에 대한 API 호출을 수행하여 결과를 병합합니다. 이 과정을 통해 복잡한 비동기 로직을 간소화할 수 있습니다.

옵저버블의 동작 방식과 유형

RxJS의 옵저버블은 기본적으로 Cold 옵저버블입니다. 이는 구독이 발생하기 전까지 데이터 스트림이 방출되지 않음을 의미합니다. Cold 옵저버블은 각 구독자가 독립적으로 데이터 스트림을 수신하게 하여, 각각 별도의 실행 환경을 갖도록 합니다.

반면, Hot 옵저버블은 데이터 스트림이 이미 생성된 상태에서 모든 구독자가 동일한 데이터 흐름을 공유하는 방식입니다. 이러한 특성을 활용하면 여러 화면에 동일한 데이터를 실시간으로 표시할 수 있습니다.

정리하며

이번 포스트에서는 Angular에서 RxJS 옵저버블의 기본 개념과 함께, 이를 활용한 여러 실전 예제를 살펴보았습니다. 리액티브 프로그래밍의 장점을 통해 비동기 데이터를 효율적으로 처리하는 방법을 배울 수 있었습니다. 앞으로 더욱 다양한 RxJS의 오퍼레이터와 패턴을 활용하여 본인의 애플리케이션을 더욱 발전시켜 보시기 바랍니다.

자주 찾으시는 질문 FAQ