[ReactiveX]Operator 이해하기Saichoiblog

Contents

[ReactiveX]Operator 이해하기
- Operator란?
- Operator 응용하기

[ReactiveX]Operator 이해하기

Operator란?

Observable을 생성하거나 가공하기 위한 rxjs에서 제공하는 연산자.

Operator의 종류

Creation Operator

Observable을 생성
of, from, range, fromEvent, timeout, nterval …
rsjs에서 로드(ajax만 예외)

Pipable Operator

pure function으로 데이터 가공(기존 데이터를 직접 수정하지 않음)

const { from } = rxjs;
const { map } = rxjs.operators;

const array = [1,2,3,4,5]

from(array).pipe(map(x=>x*2 )).subscribe(console.log) // 2 4 6 8 10

console.log(array) // [1,2,3,4,5]

rxjs.operators에서 로스

pipe 함수에 하나 이상 넣어서 연결

const { range } = rxjs

const { filter, map } = rxjs.operators
const observable$ = range(1, 10)

const observer = {
  next: x => console.log(x + ' 발행'),
  error: err => console.error('발행중 오류', err),
  complete: () => console.log('발행물 완결'),
}

observable$.pipe(
  filter(x => x % 2 === 0),
  map(x => x * 2),
  map(x => x + 10)
).subscribe(observer)

Operator 응용하기

시간에 따른 발행물에 적용해보기

const { interval } = rxjs

const { tap, filter, map } = rxjs.operators
const observable$ = interval(1000) 

observable$.pipe(
  tap(console.log),
  filter(x => x % 2 === 0),
  map(x => x * x)
).subscribe(x => console.log(x, '발행'))

tap()을 사용하여 filter 되기 전의 값을 확인할 수 있다.

<console>

0
0, “발행”
1
2
4, “발행”
3
4
16, “발행”
5
6
36, “발행”
7
8
64, “발행”

…

이벤트에 의한 발행물에 적용해보기

const { fromEvent } = rxjs

const { map } = rxjs.operators
const observable$ = fromEvent(document, 'click') 

observable$.pipe(
  map(e => e.x + ' ' + e.y),
).subscribe(x => console.log(x, '발행'))