개념 비유 및 예시
1. Observable (관찰 가능 객체)
비유: TV 방송
Observable은 TV 방송과 같음. TV 방송에서는 여러 프로그램이 송출되고, 이 방송을 보고 싶어하는 사람들이 있음. 이 방송은 데이터 스트림을 제공함.
→ Observable은 데이터를 계속해서 흘려보내는 역할.
2. Observer (관찰자)
비유: TV 시청자
Observer는 TV를 시청하는 사람과 같음. 시청자는 방송을 보고 그 내용에 따라 반응함.
→ Observer는 Observable로부터 데이터를 받고, 그 데이터를 처리하는 역할을 함.
(방송이 바뀔 때마다 시청자는 그에 맞춰 반응).
3. Subscription (구독)
비유: TV 수신기
Subscription은 TV 수신기와 같음. 수신기는 방송을 수신하기 위해 방송국과 연결되어 있어야 함.
마찬가지로, Observer(관찰자)는 Observable(관찰가능 객체)을 구독하여 그 데이터를 받을 수 있음. 구독이 해제되면 더 이상 방송을 받지 않게 됨.
4. Operators (연산자)
비유: 리모컨
Operators는 TV 리모컨과 같음. 리모컨을 사용하면 방송을 전환하거나 볼륨을 조절하는 것처럼, Operators를 사용하면 Observable(관찰가능 객체)의 데이터를 변형하거나 필터링할 수 있음.
→ 특정 프로그램만 보고 싶다면 리모컨으로 채널을 바꾸는 것처럼
- Observable: TV 방송 (데이터 흐름을 제공)
- Observer: TV 시청자 (데이터를 받고 처리)
- Subscription: TV 수신기 (Observable을 구독하여 데이터 수신)
- Operators: 리모컨 (데이터를 변형하거나 조작)
Observer란?
Observer는 Observable이 전달하는 값을 소비하는 객체. (관찰자)
Observer는 세 가지 유형의 알림에 대해 각각의 콜백을 갖는 단순한 객체로 구성됨.
next, error, complete. 이를 통해 Observable에서 발생하는 이벤트를 처리
Observer의 구조
일반적인 Observer 객체의 예
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'), };
- next: Observable이 새로운 값을 전달할 때 호출됨
- error: Observable에서 오류가 발생했을 때 호출됨
- complete: Observable의 실행이 완료되었을 때 호출됨
Observer 사용
Observer를 사용하려면, Observable의
subscribe 메서드에 전달하면 됨.observable.subscribe(observer);
이렇게 하면 Observer는 Observable에서 발생하는 이벤트를 처리하게 됨.
공식 문서의 아래 글이, Rx에서 옵저버를 가장 잘 표현하는 글이라고 생각됨.
“옵저버는 옵저버블이 제공할 수 있는 각 유형의 알림에 대해하나씩 세 번의 콜백이 있는 개체일 뿐입니다.”
부분적인 Observer
RxJS에서는 Observer가 부분적일 수 있음.
→ 모든 콜백을 제공하지 않아도 Observable의 실행은 정상적으로 이루어짐.
→ 일부 알림은 해당 콜백이 없기 때문에 무시됨.
Ex -
complete 콜백이 없는 Observerconst observer = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), };
이렇게 되면,
complete 알림이 발생해도 처리되지 않음간단한 구독 방법
- 간단히
next콜백만 제공하여 구독할 수도 있음.
→ Observable에 구독할 때, Observer 객체를 생성하지 않고도 직접
next 콜백을 제공observable.subscribe(x => console.log('Observer got a next value: ' + x));
이렇게 하면, 내부적으로
subscribe 메서드가 next 핸들러로 사용할 Observer 객체를 생성하게 됨