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 - Beginner’s Guide - GeeksforGeeks
javascript - Importing RxJS 6 in browser? - Stack Overflow
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
자바스크립트 모듈 - 물결효과 (0) | 2023.04.05 |
---|---|
반응형 웹 디바이스 구분하기 (3) | 2023.03.23 |
자바스크립트 컴포넌트 - 확장 검색 창 (6) | 2023.02.14 |
자바스크립트 컴포넌트 - 사이드 메뉴 (2) | 2023.02.13 |
엔피엠 (0) | 2023.02.01 |