라이브러리 - RxJS

RxJS (Reactive Extensions for JavaScript)는 Observable을 활용하여 리액티브 프로그래밍을 구현하게 해 주는 라이브러리로 이벤트 리스너, 비 동기 데이터 요청에서 사용되는 promise와 비슷한 기능을 하지만 오퍼레이터라는 함수들을 통해 데이터를 수정할 수 있으며, 또 하나의 값만 반환할 수 있는 promise와 달리 스트림이 닫히기 전까지 무한의 값을 반환할 수 있는 장점을 가지고 있습니다.

주요 개념

▶ Observable

데이터 스트림으로 구독할 값들을 담고 있습니다.

 

▶ Subject

Observable과 다수의 Observer가 동시에 구독할 수 있습니다.

 

▶ Observer

Observable 내의 데이터 스트림을 구독하는 객체로 next, error, complete의 콜백함수들을 가짐

observable.subscribe(observer);

 

▶ Subscription

Observable 내의 데이터에 대한 구독이 시작될 때 반환되는 객체로, 해당 Observable에 대한 구독을 종료하는 unsubscribe라는 메서드를 포함합니다.

const subscription = observable.subscribe();

 

▶ Operator

Observable을 받아서 가공한 뒤 새로운 Observable을 반환하는 함수입니다.

라이브러리 사용하기

1. 바닐라 자바스크립트로 사용하는 방법

아래 스크립트를 HTML파일에 추가하고

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.js">

rxjs라는 명령어를 통해서 각 오퍼레이션을 사용합니다.

rxjs.of()
// rxjs.of(1, 2, 3).subscribe(x => console.log(x))

rxjs.from()
// rxjs.from([2, 3, 4]).subscribe(x => console.log(x))

---

npm으로 설치 후 자바스크립트 바로 가져오기 오려면 경로 끝에 '.js'이 붙어야 하는 데 가져오기 경로를 수정하는 것은 불가능하기 때문에 작동되지 않습니다.

---

이상으로 rxjs에 대해서 알아보았습니다.

---

참고

RxJS

RxJS

RxJs - Beginner’s Guide - GeeksforGeeks

RxJs - Beginner’s Guide - GeeksforGeeks

javascript - Importing RxJS 6 in browser? - Stack Overflow

Importing RxJS 6 in browser?