RxJS 1

ooz·2021년 7월 19일
0

RxJS

목록 보기
1/1

RxJS 개발 방법

  1. 데이터를 Observable로 변경
  2. 오퍼레이터를 통해 변경 또는 추출 또는 여러 개의 Observable을 결합 또는 분리
  3. 원하는 데이터를 처리할 Observer를 생성
  4. Observable의 subscribe를 통해 Observer를 등록
  5. Observable의 구독을 정지하고 자원을 해제

리액티브 프로그래밍의 기본 패턴

  • 어떠한 동작을 하기 위해 데이터/이벤트를 Observable로 생성 -> .pipe() 메소드 안에서 필요한 오퍼레이터로 데이터를 조작/가공 -> 이렇게 나온 데이터를 구독하여 어떤 행위를 할 것인지 observer 전달
  • observer에는 Observable을 가지고 어떤 행위를 할 것인지가 정의되어 있다. next, error, complete 함수를 가진 객체.
const user$ = from(...).pipe(
    switchMap(data => ...),
    filter(user => ...),
    map(user => ...)
)
const observer = {
    next : x => console.log(`Observer가 Observable로 받은 데이터: ${x}`),
    error: err => console.error(`Observer가 Observable로 받은 에러 데이터: ${error}`),
    complete: () => console.log(`Observer가 Observable로 부터 종료 되었다는 알림 메시지`)
}
user$.subscribe(observer)
  • 데이터를 쓸데없이 계속 전달받지 않아야 할 때는 구독 취소하여 자원을 해제해야 한다. (이벤트 핸들러, interval 같은 것들..)
const sub = user$.subscribe(observer)
sub.unsubscribe() 
  • Observable로 생성된 객체는 변수 끝에 $을 붙인다.

  • Observable을 생성하는 메소드: from(), fromEvent()

profile
사는 것도 디버깅의 연속. feel lucky to be different🌈 나의 작은 깃허브는 https://github.com/lyj-ooz

0개의 댓글