RxJS 이해하기 #1

chocoder·2022년 8월 1일
0

RxJS

목록 보기
1/1
post-thumbnail

RxJS란?

비동기 및 이벤트 기반 프로그램을 구성하기 위한 라이브러리입니다.
리액트에서 비동기 처리를 위해 async/await(Promise 반환)를 사용하는 것과 마찬가지로 앵귤러에서 비동기 처리에서 RxJS(Observable 반환)를 기본적으로 지원합니다.

const ACCESS_TOKEN = "ACCESS_TOKEN";
const [request, setRequest] = useState(0);

  const postData = async () => {
    console.log(select, text);
    try {
      const response = await axios.post('http://localhost:8080/insert', {
        friend_id: select,
        chat_content: text
      }, {
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      });
      setRequest(1);
    }
    catch (error) {
      console.log(error);
    }
  }
 create(todo: Partial<Todo>): Observable<void> {
    return this.http.post<void>(`${this.BASE_URL}`, todo)
      .pipe(
        switchMap(() => this._findMyTodos()),
        map(() => undefined)
      );
  }

//-----------------------------//

submit() {
    if (this.formGroup.invalid) {
      return;
    }
    const todo = this.formGroup.getRawValue();
    this.todoService.create(todo).subscribe({
      next: () => this.formGroup.reset(),
      error: err => alert(err?.error?.code || err?.message),
    });
  }

Observable VS Promise

  1. 처리할 수 있는 개수
    RxJS는 모든 이벤트를 Observable로 추상화하여 시간에 따른 스트림으로 간주할 수 있게 합니다. 즉, Observable은 여러 값을 처리할 수 있습니다.
    Promise의 경우, 하나의 Promise가 단 1개의 값을 처리할 수 있습니다.

  2. 취소 가능의 여부
    Observable은 취소가 가능합니다.

  3. 시작 시점
    Promise는 즉시 시작되지만, Observable은 구독하는 경우에만 시작이 된다.

RxJS 용어 정리

Observable

시간을 축으로 연속적인 데이터를 저장하는 컬렉션을 표현한 객체입니다.
Observable을 호출하고 이러한 값을 보려면 구독(Subscribe)을 해야합니다.

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('just after subscribe');
just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

Observer

Observable에 의해 전달된 데이터를 소비하는 주체로, Observar는 단순히 콜백의 집합으로 Observable이 전달하는 각 알림 유형 next, error, complete 에 대해 하나씩 제공됩니다.

const observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// Observer를 사용하려면 Observable의 subscribe에 넣어줘야합니다.
observable.subscribe(observer); 

Operator

Observable을 생성 및 조작하는 함수로, Pipeable Operator / Creation Operator 두 종류로 나뉩니다.

  • Pipeable Operator는 Observable을 입력으로 받아 다른 Observable을 반환하는 함수입니다. 이전 Observable은 수정되지 않은 상태로 유지됩니다. ex) map()

  • Creation Operator는 새로운 Observable을 생성하는 standalone 함수이다. ex) of()

import { of, map } from 'rxjs';

of(1, 2, 3)
  .pipe(map((x) => x * x))
  .subscribe((v) => console.log(`value: ${v}`));

// Logs:
// value: 1
// value: 4
// value: 9

Subscription

Observable.prototype.subscribe의 반환값으로 자원의 해제를 담당합니다. 데이터를 더이상 전달받고 싶지 않을 경우, unsubscribe 메서드로 자원을 해지할 수 있습니다.

import { interval } from 'rxjs';

const observable = interval(1000);
const subscription = observable.subscribe(x => console.log(x));

subscription.unsubscribe();

Subject

Observable과 비슷하지만, 많은 Observer에게 멀티캐스트할 수 있습니다. 즉, Observer이기도 하지만, Observable이기도 한 특별한 타입입니다.

import { Subject } from 'rxjs';

const subject = new Subject<number>();

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`),
});
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`),
});

subject.next(1);
subject.next(2);

// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2

후기

참고자료
https://rxjs.dev/guide/observable
https://min9nim.vercel.app/2020-04-24-rxjs/
https://grapgrap.tistory.com/24
https://abelog.netlify.app/RxJS/rxjs-%EA%B8%B0%EC%B4%88,-%ED%95%B5%EC%8B%AC-%F0%9F%90%89/

0개의 댓글