[Chapter#1] Lesson 2. Observer(구독자)에게 발행물 구독시키기

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

 

observer는 사전적인 의미로 "관찰자"이다. 그리고 구독자는 영어로 "subscriber"이다. RxJS를 공부하면서 앞에 두 단어를 같이 사용하면서 설명하는 분들이 많아서 였다. 결론 부터 말하자면 두 개는 같다.

 

■ observer의 형태

 

const { from } = rxjs
const observable$ = from([1, 2, 3, 4, 5])

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

// [1] observer를 객체로 선언하고 구독자 함수에 인자로 넣는 방법
observable$.subscribe(observer)

// [2] observer 객체를 따로 만들지 않고 바로 인자로 넣는 방법
observable$.subscribe({
  next: x => console.log,
  error: err => console.error('발행중 오류', err),
  complete: () => console.log('발행물 완결'),
})

// [3] 콜백함수 하나만 넣는 방법(next 메서드로 동작된다)
observable$.subscribe((x) => console.log(x))

// [4] 함수 여러개를 넣는 방법(단, 인자의 위치에 따라 next, error, complete 순서로 동작된다)
observable$.subscribe({
observable$.subscribe(
  x => console.log(x),
  err => console.error('발행중 오류', err),
  () => console.log('발행물 완결')
)

 

observer는 next, error, complete 총 세 가지 메서드를 가지고 있다. 여기서 next는 단어 때문에 헷갈릴 수 있으나 , 단순히 값을 처리하는 역할을하는 메서드이다.

 

---

 

■ Error 와 Complete

observable에서 발행 중 오류 또는 complete을 만났을때 observable은 그 시점에서 멈추게 되는 특징이 있다.

complete를 통해 발행이 완료된 observable을 종료시켜줌으로써 메모리 공간을 확보해주자.

 

const obs$ = new Observable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)
  (null)[0]
  subscriber.next(4)
})

obs$.subscribe(
  console.log,
  err => console.error('발행중 오류', err),
  _ => console.log('발행물 완결')
)

// 1
// 2
// 3
// 발행중 오류 에러 출력

 

subscriber.next(3) 다음에 있는 null 은 실행오류로써 구독자 함수에서 정의한 error 함수가 감지해 "발행중 오류"를 console.log에 출력한다. 그리고 subscriber.next(4)는 출력되지 않는다. complete 함수 또한 출력되지 않는다. 즉, Observable은 값을 발행하는 중에 오류를 만나면 발행을 중단한다.

 

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

obs$.subscribe(
  console.log,
  err => console.error('발행중 오류', err),
  _ => console.log('발행물 완결')
)

// 1
// 2
// 3
// 발행물 완결

 

Error와 다르게 구독자함수에 있는 complete 함수가 작동해 발행물 완결이 console.log에 출력되었다. 그리고 Error와 똑같이 subscriber.complete() 단계에서 멈춰 버려 다음 발행물들을 출력하지 않는다.

 

---

■ 발행 취소시키기

observable로 발행 중 complete를 추가해 자체적으로 종료시키는 방법과 unsubscribe()함수를 통해 observable을 종료시키는 방법 두 가지가 있다.

 

const obs$ = interval(1000)
const subscription = obs$.subscribe(console.log)

// [1]
setTimeout(_ => subscription.unsubscribe(), 5500)

// [2]
setTimeout(_ => obs$.subscribe(console.log), 7500)

// 결과: 0, 1, 2, 3, 4 출력 후 2초간 멈춘 뒤 다시 0, 1, 2, 3... 이 출력된다.

 

(왼) observable.complete() 또는 (오) subscribe.unsubscribe()