[ReactiveX]Observable 만드는 5가지 방법

[ReactiveX]Observable 만드는 방법 5가지 방법

1. 배열을 반환하는 옵저버블

of()

of를 사용하여 1,2,3,4,5를 발행하는 옵져버블 obs1$를 생성하여 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { of } = rxjs
// const of = rxjs.of -> 위 코드와 같은 코드

const obs1$ = of(1, 2, 3, 4, 5)

obs1$.subscribe(item => console.log(`of: ${item}`))

 

<console>

from()

from를 사용하여 6,7,8,9,10이 들어가있는 배열을 각각 발행하는 옵져버블 obs2$를 생성하여 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { from } = rxjs
// const from = rxjs.from -> 위 코드와 같은 코드

const obs2$ = from([6, 7, 8, 9, 10])

obs2$.subscribe(item => console.log(`from: ${item}`))

<console>

range()

range를 사용하여 11에서 5개의 범위 안에 있는 숫자 11,12,13,14,15를 발행하는 옵져버블 obs3$를 생성하여 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { range } = rxjs
// const range = rxjs.range -> 위 코드와 같은 코드

const obs3$ = range(11, 5)

obs3$.subscribe(item => console.log(`range: ${item}`))

<console>

generate()

generate를 사용하여 15부터 시작하여 30보다 작은 숫자에 2를 더한 값을 발행하는 옵져버블 obs4$를 생성하여 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { generate } = rxjs

const generate = rxjs.generate

const obs4$ = generate(
  15, x => x < 30, x => x + 2
)

obs4$.subscribe(item => console.log(`generate: ${item}`))

<console>

2. 시간을 다루는 옵저버블

interval()

interval을 사용하여 0부터 1초에 한번씩 늘어나게 발행하는 옵져버블 obs1$을 생성하는 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { interval } = rxjs
// const range = rxjs. interval -> 위 코드와 같은 코드

const obs1$ = interval(1000)

obs1$.subscribe(item => console.log(`interval: ${item}`))

<console>

timer()

timer를 사용하여 3초후에 값을 발행하는 옵져버블 obs2$를 생성한 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { timer } = rxjs

const obs2$ = timer(3000)

obs2$.subscribe(item => console.log(`timer: ${item}`))

<console>

3. 이벤트를 다루는 옵져버블

fromEvent()

fromEvent를 사용하여 마우스로 document 부분을 클릭했을 때와 document의 아이디 값이 myInput인 것을 찾아내 값 입력을 받았을 때라는 시간을 발행하는 옵져버블 obs1$과 obs2$를 만들어 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

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

const { fromEvent } = rxjs

// 마우스 클릭 이벤트
const obs1$ = fromEvent(document, 'click')
obs1$.subscribe(item => console.log(item))

// 키프레스 이벤트
const obs2$ = fromEvent(document.getElementById('myInput'), 'keypress')
obs2$.subscribe(item => console.log(item))

4. Ajax 요청하는 옵져버블

ajax()

ajax를 사용하여 서버에 값을 요청을 발행하는 옵져버블 obs&를  만들어 이를 구독하는 코드를 작성

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { ajax } = rxjs.ajax

const obs$ = ajax(`http://127.0.0.1:3000/people/1`)
obs$.subscribe(result => console.log(result.response))

5. 커스터마이징 옵져버블

 new Observable()

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { Observable } = rxjs

const obs$ = new Observable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)

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

obs$.subscribe(item => console.log(item))

옵져버블의 특징

const { of, interval, fromEvent } = rxjs

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)

<console>