RxJS-최신 업데이트
이 튜토리얼에서는 RxJS 버전 6을 사용하고 있습니다. RxJS는 일반적으로 반응 형 프로그래밍을 처리하는 데 사용되며 Angular, ReactJS에서 더 자주 사용됩니다. Angular 6은 기본적으로 rxjs6을로드합니다.
RxJS 버전 5는 버전 6과 비교하여 다르게 처리되었습니다. RxJS 5를 6으로 업데이트하면 코드가 손상됩니다.이 장에서는 버전 업데이트를 처리하는 방법의 차이점을 살펴 보겠습니다.
RxJS를 6으로 업데이트하고 코드 변경을 원하지 않는 경우에도 그렇게 할 수 있으며 다음 패키지를 설치해야합니다.
npm install --save-dev rxjs-compact
이 패키지는 이전 버전과의 호환성을 제공하고 이전 코드는 RxJS 버전 6에서 잘 작동합니다. RxJS 6에서 잘 작동하는 코드 변경을 수행하려면 다음을 수행해야합니다.
운영자, 관찰 가능 항목, 주제에 대한 패키지가 재구성되었으므로 주요 변경 사항은 수입품에 적용되며 아래에 설명되어 있습니다.
운영자를위한 수입품
버전 5에 따라 연산자의 경우 다음 import 문이 포함되어야합니다.
import 'rxjs/add/operator/mapTo'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/tap'
import 'rxjs/add/operator/map'
RxJS 버전 6에서 가져 오기는 다음과 같습니다.
import {mapTo, take, tap, map} from "rxjs/operators"
Observable 생성을위한 메소드 가져 오기
버전 5에 따라 Observable로 작업하는 동안 다음 가져 오기 방법이 포함되어야합니다.
import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";
RxJS 버전 6에서 가져 오기는 다음과 같습니다.
import {from, of, fromEvent, interval} from 'rxjs';
Observable 가져 오기
RxJS 버전 5에서는 Observable로 작업하는 동안 다음 import 문이 포함되어야합니다.
import { Observable } from 'rxjs/Observable'
RxJS 버전 6에서 가져 오기는 다음과 같습니다.
import { Observable } from 'rxjs'
주제 가져 오기
RxJS 버전 5에서 제목은 다음과 같이 포함되어야합니다.
import { Subject} from 'rxjs/Subject'
RxJS 버전 6에서 가져 오기는 다음과 같습니다.
import { Subject } from 'rxjs'
RxJS 6에서 연산자를 사용하는 방법은 무엇입니까?
pipe() method생성 된 Observable에서 사용할 수 있습니다. 버전 5.5부터 RxJS에 추가되었습니다. 이제 pipe ()를 사용하여 여러 연산자를 순차적으로 함께 작업 할 수 있습니다. RxJS 버전 5에서 연산자가 사용 된 방법입니다.
예
import "rxjs/add/observable/from";
import 'rxjs/add/operator/max'
let list1 = [1, 6, 15, 10, 58, 2, 40];
from(list1).max((a,b)=>a-b).subscribe(x => console.log("The Max value is "+x));
RxJS 버전 5.5부터는 pipe ()를 사용하여 연산자를 실행해야합니다.
예
import { from } from 'rxjs';
import { max } from 'rxjs/operators';
from(list1).pipe(max((a,b)=>a-b)).subscribe(x => console.log(
"The Max value is "+x)
);
운영자 이름 변경
패키지를 재구성하는 동안 일부 연산자는 javascript 키워드와 충돌하거나 일치하므로 이름이 변경되었습니다. 목록은 다음과 같습니다.
운영자 | 다음으로 이름 변경 |
---|---|
하다() | 꼭지() |
잡기() | catchError () |
스위치() | switchAll () |
드디어() | finalize () |
던지다() | throwError () |