RxJS - Quick Start

jungeundelilahLEE·2022년 1월 27일
0

RxJS

목록 보기
1/1
  • RxJS(ReactiveX for JavaScript) : ReactiveX의 자바스크립트 버전 라이브러리
  • 웹 애플리케이션의 오류가 발생하는 경우 : 1) 입력오류 2) 상태오류 3) 로직오류
  1. 입력오류
  • 동기와 비동기의 차이점을 "시간" 이라는 개념을 통해 해결
  • ex. 버튼 및 키보드 이벤트(비동기) & 함수호출(동기)
  • 결론적으로 시간의 축으로 보면, 동기와 비동기는 같은 형태이다.
  • 시간을 인덱스로 둔 컬렉션으로 볼 수 있다. RxJS에서는 이를 "스트림(Stream)" 이라고 한다.
  • RxJS에서는 스트림을 표현하는 "Observable 클래스" 를 제공한다.

1-1. Observable

  • 시간을 인덱스로 둔 컬렉션을 추상화한 class
  • 효용 : 데이터가 어떠한 형태로 전달되는지 고민할 필요 없이, observable을 통해서 데이터를 전달받을 수 있다.
  • 모든 데이터는 observable instance로 만들 수 있다.
    • 클래스와 인스턴스 : 비타민 : 클래스 = 내가 먹는 발포비타민 베로카 : 인스턴스
  • fromEvent : 키보드, 마우스같은 이벤트를 observable로 만드는 경우
    • fromEvent(HTMLElement, "[eventType]")
  • from : 배열같은 iterable이나 array-like, Promise 데이터를 observable로 만드는 경우
    • from(Iterable | Array-like | Promise)
  • of : 단일 데이터를 연속으로 전달하는 경우
    • of(...items)
  • observable 객체의 변수명은 관용적으로 접미사로 $를 붙인다.
  1. 상태오류
    2-1. Observer pattern
  • "Subject" : 상태가 변경될 대상

  • "Observer" : 그 상태 변화를 관찰하는 대상 (언제든 추가, 삭제)

  • subject와 observer가 느슨하게 연결되어 있다. (서로를 잘 모름..)

  • 하나의 객체(subject)의 상태가 바뀌면 그 객체에 의존하는 다른 객체들(observer)에게 알림이가고, 자동으로 내용(상태)이 갱신되는 방식으로 일대다 형식

  • 기존 : 데이터를 가져오기 위해 해당 대항이 매번 요청을 통해 변경사항을 확인
    => pull 방식

  • 옵저버 방식 : 의존 관계의 대상(subject)으로부터 데이터를 제공받음
    => push 방식

  • 옵저버패턴의 아쉬운 점

    • 상태를 전달하는 subject의 데이터가 언제 종료되는지 observers는 알 수 없다. 이 문제를 해결하기 위해 subject와 observer의 새로운 규칙(ex. 분기 등) 필요.
    • update interface만 이용해서 subject의 상태를 observer에게 전달하기 때문에, subject의 에러 발생 상황을 observer에게 전달하기 어렵다.
  • Observer Pattern VS RxJS

    Observer PatternRxJS
    Subject와 Observer가 "add 과정 후" 부터 데이터를 전달받는다.RxJS에서 전달되는 데이터는 모두 Observable 형태로 반환된다.
    Observable은 "subscribe 과정 후" 부터 데이터를 전달받는다.
    (Observable은 Subject와 비슷)
    Observer는 "add 메소드" 를 통해 Subject에 전달된다.Observer는 "함수와 객체 모두 가능" 하며, "subscribe 메소드" 를 통해 Subject에 전달된다.
    update methodnext method
    종료시점, 에러시점에 대한 method 존재 X종료시점 : complete
    에러시점 : error
    1개 method를 갖는 Observer를 사용한다.Observer는 next, complete, error 3개 method를 갖는다.
    객체, 함수 사용주로 함수 사용
    (reason : 객체는 상태를 가질 수 있기 때문 / 함수는 상태가 존재하지 않는 기능만 담당)
    read-only (단방향 데이터 흐름) : 데이터가 양방향으로 흐르는 문제를 개선
    Observable은 subscribe를 통해 데이터를 전달할 대상(Observer)에게 데이터를 전달할 수 있지만, 반대로 전달할 대상(Observer)으로부터 데이터를 전달받을 수 없다.
    리액티브 : 상태변화의 흐름이 자동으로 이루어지는 것
  • RxJS의 Observable & Subject
    RxJS에는 Observable도, Subject도 있다.
    RxJS의 Subject === Observer Pattern의 Subject
    : 다수의 Observer에게 공통의 데이터를 전달하고 update 등의 메소드가 존재해서 데이터의 변경도 가능하다.
    RxJS의 Observerble !== Observer Pattern의 Subject
    : Observable은 단지 하나의 Observer에게 독립적인 데이터를 전달한다.


Subscription


takeUntil (container-qty.component.ts




기본개념 및 순서

Observable : 식별(관찰)할 수 있는
오퍼레이터 : 연산자
Observer : 관찰자, 목격자, 참관인
Subscription : 구독
Subject
Scheduler

Observable

: 시간을 축으로 연속적인 데이터를 저장하는 컬렉션을 표현한 객체

  • Observable은 데이터를 제공하는 소스를 Observer에게 전달한다.
  • called 'Stream(스트림)'

오퍼레이터

: Observable을 생성 및 조작하는 함수

  • Observable을 생성하기도 하고, 각각의 Observable을 연결하기도 한다.
  • 현재의 Observable 인스턴스를 기반으로 항상 새로운 Observable 인스턴스를 반환한다.

Observer

: Observable에 의해 전달된 데이터를 소비하는 주체

  • next, error, complete 함수를 가진 객체를 가리킨다.

  • Observable에 의해 데이터가 전달될 때는 next 함수가 호출되고, 에러가 발생하면 error, 데이터 전달이 완료되면 complete 함수가 호출된다.

  • Observable과 subscribe 메소드를 통해서 연결된다.

    Observable.prototype,subscribe 함수 : subscribe는 Observer를 파라미터로 받는다.

Subscription

: Observable.prototype,subscribe의 반환값

  • Subscription 객체는 자원의 해제를 담당한다.
  • 등록된 Observable의 데이터를 더이상 전달받지 않고 싶을 때는 unsubscribe 메소드를 호출해서 자원을 해제한다.

RxJS 일반적인 프로세스

  1. 데이터 소스를 Observable로 변경한다.
  2. 오퍼레이터를 통해 데이터를 변경하거나 추출한다. 또는 여러개의 Observable을 하나의 Observable로 합치거나 하나의 Observable을 여러 개의 Observable로 만든다.
  3. 원하는 데이터를 받아 처리하는 Observer를 만든다.
  4. Observable의 subscribe를 통해 Observer를 등록한다.
  5. Observable 구독을 정지하고 자원을 해지한다.


Observable 만들기

  • RxJS 사용시, 가장 먼저 하는 작업은 Observable을 만드는 것. (feat.모든 데이터는 Observable로 만들 수 있다)

Observable 생성자를 이용해서 Observable 만들기

  • Observable은 class. 따라서 new 키워드를 이용해서 객체를 생성할 수 있다.
  • Observable.create 정적메소드를 이용해서도 만들 수 있다.

Observable 구현 시 고려사항

  • Observable은 데이터를 전달하지만, 항상 정상적으로 데이터를 전달하는 것은 아니다. 따라서, Observable은 자신을 구독하고 있는 Observer에게 데이터를 전달하기도 하지만, 현 상태 (에러, 데이터 전달 완료 등)를 전달하기도 해야 한다.
  • next, error, complete 메소드를 호출해서 Observer에게 상태를 전달한다.
  • Observer.complete가 호출되면 Observer와의 구독을 자동으로 해지한다.

구독해제

  • element에 이벤트핸들러를 붙여서 데이터를 계속 전송받는 경우 or interval을 통해 데이터를 계속 전달받는 경우에는 꼭!!!! 반드시 자원을 해제해야 한다.
  • 이벤트 : removeEventListener를 호출해서 이벤트핸들러 제거
  • interval : clearInterval을 호출해서 interval 중지
  • unsubscribe에서는 Observable 생성시 할당한 자원도 함께 제거해야 한다.

RxJS 네임스페이스

  1. of : 각각의 단일 데이터 값을 전달하는 Observable을 만들 때 사용한다. 모든 값이 전달되면 complete을 호출하고 구독을 자동 해제한다.
  2. range : 범위 내 수의 값들을 전달하는 Observable을 만들 때 사용한다. 범위 내 값을 1씩 증가시킨 숫자 데이터를 전달한다. 모든 값이 전달되면 complete을 호출하고 구독을 자동 해제한다.
  3. fromEvent : 브라우저에서 발생하는 event를 Observable로 만들 때 사용한다. / fromEvent로 만든 Observable은 이벤트핸들러를 등록해서 자원을 사용하고 있는 경우이기 때문에, 이벤트핸들러를 제거하기 전까지는 자원을 계속 사용한다. / 에러가 발생하지 않는 이상, Observable의 구독이 해제되지 않기 때문에, subscription의 unsubscribe를 호출해서 자원을 해제해야 한다.
  4. from : 배열, 배열같은 객체, iterable 객체, Promise 등 거의 모든 데이터를 Observable로 만들 때 사용한다.
    <special 용도>
  5. empty : Observable의 완료 상태를 전달하는 Observable을 생성한다.
  6. throwError : Observable 에러 상태를 전달하는 Observable을 생성한다.
  7. never : 아무것도 하지 않는 Observable을 생성한다. / empty, throwError 함수와 다르게 Observable의 상태를 변경하지 않는다. / 현재의 전달된 데이터를 전달하지 않고자 할 때 사용된다.


Observable

특징
함수와 Observable
Promise와 Observable
함수 vs Observable vs Promise
Pull 과 Push

특징

  • 모든 데이터는 Observable 인스턴스로 만들 수 있다.
  • Observable은 읽기 전용이다.
  • Observable은 리액티브하다.
  • Observable은 불변 객체이다.

함수 vs Observable vs Promise

구분함수ObservablePromise
정의함수 선언Observable 객체 생성Promise 객체 생성
호출함수 호출Observable.subscribePromise.then
호출 시 정의부 실행 여부매번 정의부 실행매번 정의부 실행생성 시 단 한번 호출
지연(lazy) 가능 여부OOX
(Promise는 정해진 상탯값만 호출됨)
데이터한 개여러 개한 개
에러처리 지원없음error 상태reject 상태
취소 지원XOX
전달 방식PullPushPush
  • push 방식은 데이터 존재에 대한 오류 처리를 별도로 할 필요가 없어서 리액티브하게 데이터를 전달 할 수 있다.


Operator

profile
delilah's journey

0개의 댓글