Angular와 함께 사용하는 RxJS 소개 및 활용 방법

10 Nov 2023

javascript

Angular는 사용자 인터페이스를 구축하기 위한 강력한 프레임워크입니다. 그러나 비동기 데이터 처리와 상태 관리는 개발자에게 도전적인 과제가 될 수 있습니다. 이러한 과제를 간단하고 효율적으로 처리할 수 있는 도구로 RxJS를 소개합니다.

RxJS란?

RxJS는 Reactive Extensions의 약자로, 자바스크립트를 위한 라이브러리입니다. 이 라이브러리는 Observable 시퀀스와 이벤트, 데이터 스트림을 쉽게 다룰 수 있게 도와줍니다. RxJS는 Angular에서 비동기 데이터 처리를 위한 핵심 요소로 사용됩니다.

RxJS의 주요 개념

Observable

Observable은 데이터 스트림을 나타내는 객체입니다. 이 데이터 스트림은 여러 개의 값을 발생시킬 수 있으며, 이벤트를 전달할 수도 있습니다. Angular에서 HTTP 요청, 사용자 이벤트, 타이머와 같은 다양한 상황에서 Observable을 사용할 수 있습니다.

Operator

Operator는 Observable을 변형하거나 조작하는 함수입니다. 예를 들어, map, filter, reduce 등의 연산자를 사용하여 Observable에서 원하는 데이터를 추출하거나 변형할 수 있습니다. Operator는 함수 체인을 통해 연결되어 사용됩니다.

Subscription

Subscription은 Observable을 구독하는 과정을 나타내는 개념입니다. Observable에 구독하면 값이 발행되거나 이벤트가 전달될 때마다 알림을 받을 수 있습니다. Subscription을 통해 데이터를 소비하거나, 구독을 해제하거나 일시 중단할 수 있습니다.

Subject

Subject는 Observable과 Subscription의 중간 역할을 수행하는 개념입니다. Subject는 값을 발행하고, 다른 Observable에 값을 전달할 수도 있습니다. Angular에서는 상태 관리를 위해 주로 BehaviorSubject를 활용합니다.

RxJS의 활용 방법

Angular 프로젝트에 RxJS 추가하기: Angular 프로젝트 생성 시 기본적으로 RxJS가 함께 설치됩니다. 추가적인 패키지 설치나 설정은 필요하지 않습니다.
Observable 생성하기: Observable은 다양한 소스에서 생성할 수 있습니다. HTTP 요청, 이벤트, 타이머 등을 Observable로 변환하여 사용할 수 있습니다.

import { Observable } from 'rxjs';

const myObservable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
});

Operator 적용하기: 생성한 Observable에 Operator를 적용하여 데이터를 원하는 형태로 변형할 수 있습니다.

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const myObservable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
});

const myTransformedObservable = myObservable.pipe(
  map(value => value * 2)
);

Subscription으로 데이터 소비하기: Subscription을 통해 Observable에서 값이나 이벤트를 소비하고, 원하는 작업을 수행할 수 있습니다.

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const myObservable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
});

const myTransformedObservable = myObservable.pipe(
  map(value => value * 2)
);

const subscription = myTransformedObservable.subscribe(value => {
  console.log(value);
});

subscription.unsubscribe(); // 구독 종료

추가적인 활용 예제

HTTP 요청 결과를 Observable로 처리하여 비동기적으로 데이터를 받아오기
사용자 이벤트를 Observable로 처리하여 상태 변경을 감지하기
여러 개의 Observable 조합하여 복잡한 비동기 처리 흐름 만들기

결론

Angular와 함께 사용하는 RxJS는 비동기 데이터 처리와 상태 관리를 간편하게 처리할 수 있는 강력한 도구입니다. RxJS의 주요 개념과 활용 방법에 대해 알아보았는데, 이를 실제 프로젝트에서 적용해 보면 더욱 효과적인 개발을 할 수 있을 것입니다.

참고 자료:

#Angular #RxJS