[Chapter#1] Lesson 1. Observable(스트림 생성기) 만들기 (5가지)

링크: https://www.yalco.kr/@rxjs/1-1/

 

1. 배열된 스트림 (of, from, range, generate)

- 시간에 구애를 받지 않는 1차원적인, 평면적인 스트림.

 

const obs1$ = of(1, 2, 3, 4, 5)
// 인자 자체가 각각 값으로 출력된다.
// 결과: 1, 2, 3, 4, 5

const obs2$ = from([6, 7, 8, 9, 10])
// 배열을 인자로 받아 배열에 들어있는 요소 하나하나가 출력된다.( ~부터)
// 결과: 6, 7, 8, 9, 10

const obs3$ = range(11, 5)
// 첫 번째 인자는 시작 위치, 두 번째 인자는 n번째 까지를 나타낸다. (범위)
// 결과: 11, 12, 13, 14, 15

const obs4$ = generate(
  15, x => x < 30, x => x + 2
)
// for과 같은 반복문과 비슷하다. (생성)
// 결과: 15, 17, 19, 21, 23, 35, 27, 29

 

2. 시간에 의한 스트림 (interval, timer)

 

const obs1$ = interval(1000)
const obs2$ = timer(3000)

 

3. 이벤트에 의한 스트림 (fromEvent)

 

<input id="myInput" type="text"/>

const obs1$ = fromEvent(document, 'click')
const obs2$ = fromEvent(document.getElementById('myInput'), 'keypress')

 

4. AJAX를 통한 스트림 (ajax)

 

const obs$ = ajax(`http://127.0.0.1:3000/people/1`)

 

5. 직접 만드는 스트림 (new Observable, next, complete)

- 위 은 RxJS에서 제공하는 메서드로 observable(출력값)을 만들어냈지만, 생성자 함수 "new Observable"을 사용해 직접 observable을 만들 수도 있다.

 

// 평면적인 값을 출력하는 observable
const obs$ = new Observable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)

  // 값을 다 발행한 뒤에는 compelte를 실행하여 메모리 해제 
  subscriber.complete()
})

obs$.subscribe(item => console.log(item))
// .next 메서드에서 발행된 값이 순차적으로 출력된다.
// 1, 2, 3

// setInterval을 이용해 시간과 관련된 observable
const obs$ = new Observable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)

  let i = 4
  setInterval(_ => subscriber.next(i++), 1000)
})

obs$.subscribe(item => console.log(item))
// 1, 2, 3, 4, 5, 6...

 

observable은 게으르다.

- 누군가 구독을 해야 발행을 시작
- 각 구독자에게 따로 발행

 

이게 무슨 말일까?

Q. 누군가 구독을 해야 발행을 시작? 구독자함수로 observable을 구독해야 값이 출력된다. 만약 일반적인 console.log로 observable을 출력하려고 했을때 "값"이 아닌 observable "객체"에 대한 정보가 출력된다. 

 

Q. 각 구독자에게 따로 발행? 아래 코드의 예시를 보면 obs2$를 구독자함수로 호출하는 곳이 두 곳이다.출력된 값을 보면, 두개의 console.log가 각각 출력이되는데 값이 서로 다른 것을 알 수 있다. 즉, 구독자함수가 호출될 때 마다 독립적인 instance가 생성되는 것이다.

 

const obs1$ = of('a', 'b', 'c')
const obs2$ = interval(1000)
const obs3$ = fromEvent(document, 'click')

setTimeout(_ => {
  console.log('of 구독 시작')
  obs1$.subscribe(item => console.log(item))
}, 5000)
setTimeout(_ => {
  console.log('interval 구독 시작')
  obs2$.subscribe(item => console.log(item))
}, 10000)
setTimeout(_ => {
  console.log('fromEvent 구독 시작')
  obs3$.subscribe(_ => console.log('click!'))
}, 15000)
setTimeout(_ => {
  console.log('interval 구독 시작 2')
  obs2$.subscribe(item => console.log(item))
}, 20000)