1-1. Observable
fromEvent
: 키보드, 마우스같은 이벤트를 observable로 만드는 경우fromEvent(HTMLElement, "[eventType]")
from
: 배열같은 iterable이나 array-like, Promise 데이터를 observable로 만드는 경우from(Iterable | Array-like | Promise)
of
: 단일 데이터를 연속으로 전달하는 경우of(...items)
$
를 붙인다."Subject" : 상태가 변경될 대상
"Observer" : 그 상태 변화를 관찰하는 대상 (언제든 추가, 삭제)
subject와 observer가 느슨하게 연결되어 있다. (서로를 잘 모름..)
하나의 객체(subject)의 상태가 바뀌면 그 객체에 의존하는 다른 객체들(observer)에게 알림이가고, 자동으로 내용(상태)이 갱신되는 방식으로 일대다 형식
기존 : 데이터를 가져오기 위해 해당 대항이 매번 요청을 통해 변경사항을 확인
=> pull 방식
옵저버 방식 : 의존 관계의 대상(subject)으로부터 데이터를 제공받음
=> push 방식
옵저버패턴의 아쉬운 점
Observer Pattern VS RxJS
Observer Pattern | RxJS |
---|---|
Subject와 Observer가 "add 과정 후" 부터 데이터를 전달받는다. | RxJS에서 전달되는 데이터는 모두 Observable 형태로 반환된다. Observable은 "subscribe 과정 후" 부터 데이터를 전달받는다. (Observable은 Subject와 비슷) |
Observer는 "add 메소드" 를 통해 Subject에 전달된다. | Observer는 "함수와 객체 모두 가능" 하며, "subscribe 메소드" 를 통해 Subject에 전달된다. |
update method | next method |
종료시점, 에러시점에 대한 method 존재 X | 종료시점 : complete 에러시점 : error |
1개 method를 갖는 Observer를 사용한다. | Observer는 next, complete, error 3개 method를 갖는다. |
객체, 함수 사용 | 주로 함수 사용 (reason : 객체는 상태를 가질 수 있기 때문 / 함수는 상태가 존재하지 않는 기능만 담당) |
read-only (단방향 데이터 흐름) : 데이터가 양방향으로 흐르는 문제를 개선 Observable은 subscribe를 통해 데이터를 전달할 대상(Observer)에게 데이터를 전달할 수 있지만, 반대로 전달할 대상(Observer)으로부터 데이터를 전달받을 수 없다. | |
리액티브 : 상태변화의 흐름이 자동으로 이루어지는 것 |
Subscription
takeUntil (container-qty.component.ts
Observable : 식별(관찰)할 수 있는
오퍼레이터 : 연산자
Observer : 관찰자, 목격자, 참관인
Subscription : 구독
Subject
Scheduler
: 시간을 축으로 연속적인 데이터를 저장하는 컬렉션을 표현한 객체
: Observable을 생성 및 조작하는 함수
: Observable에 의해 전달된 데이터를 소비하는 주체
next, error, complete 함수를 가진 객체를 가리킨다.
Observable에 의해 데이터가 전달될 때는 next 함수가 호출되고, 에러가 발생하면 error, 데이터 전달이 완료되면 complete 함수가 호출된다.
Observable과 subscribe 메소드를 통해서 연결된다.
Observable.prototype,subscribe 함수
: subscribe는 Observer를 파라미터로 받는다.
: Observable.prototype,subscribe
의 반환값
new
키워드를 이용해서 객체를 생성할 수 있다.Observable.create 정적메소드
를 이용해서도 만들 수 있다.next, error, complete
메소드를 호출해서 Observer에게 상태를 전달한다.Observer.complete
가 호출되면 Observer와의 구독을 자동으로 해지한다.removeEventListener
를 호출해서 이벤트핸들러 제거clearInterval
을 호출해서 interval 중지unsubscribe
에서는 Observable 생성시 할당한 자원도 함께 제거해야 한다.complete
을 호출하고 구독을 자동 해제한다.complete
을 호출하고 구독을 자동 해제한다.fromEvent
로 만든 Observable은 이벤트핸들러를 등록해서 자원을 사용하고 있는 경우이기 때문에, 이벤트핸들러를 제거하기 전까지는 자원을 계속 사용한다. / 에러가 발생하지 않는 이상, Observable의 구독이 해제되지 않기 때문에, subscription의 unsubscribe
를 호출해서 자원을 해제해야 한다.empty
, throwError
함수와 다르게 Observable의 상태를 변경하지 않는다. / 현재의 전달된 데이터를 전달하지 않고자 할 때 사용된다.특징
함수와 Observable
Promise와 Observable
함수 vs Observable vs Promise
Pull 과 Push
구분 | 함수 | Observable | Promise |
---|---|---|---|
정의 | 함수 선언 | Observable 객체 생성 | Promise 객체 생성 |
호출 | 함수 호출 | Observable.subscribe | Promise.then |
호출 시 정의부 실행 여부 | 매번 정의부 실행 | 매번 정의부 실행 | 생성 시 단 한번 호출 |
지연(lazy) 가능 여부 | O | O | X (Promise는 정해진 상탯값만 호출됨) |
데이터 | 한 개 | 여러 개 | 한 개 |
에러처리 지원 | 없음 | error 상태 | reject 상태 |
취소 지원 | X | O | X |
전달 방식 | Pull | Push | Push |