Observer, Subscription, subscribe() / unsubscribe(): 비동기 데이터 스트림을 관찰하고 관리하는 기본 흐름

1. 개념

Observer (옵저버)는 Observable (옵저버블)에서 방출하는 값(value)을 받아 처리하는 객체이다. Observer는 크게 세 가지 메서드를 갖는다.

• next(value): Observable에서 새로운 값이 방출될 때 호출된다.
• error(error): Observable에서 에러가 발생했을 때 호출된다.
• complete(): Observable이 더 이상 값을 방출하지 않음을 알릴 때 호출된다.

Subscription (섭스크립션)은 Observable과 Observer 간의 연결을 나타내는 객체이다. Observable을 구독하면 Subscription이 반환되며, 이를 통해 구독을 해제할 수 있다.

subscribe() (섭스크라이브) 메서드는 Observable 인스턴스에서 호출하여 Observer를 등록하고 데이터 스트림을 구독하는 역할을 한다. 반환 값은 Subscription 객체이다.

unsubscribe() (언섭스크라이브) 메서드는 Subscription 객체에서 호출하여 Observable과의 연결을 끊고 더 이상 값을 받지 않도록 하는 역할을 한다. 자원 관리 및 메모리 누수 방지를 위해 사용된다.

2. 왜 사용하는가

데이터 스트림을 다루는 현대적인 웹 애플리케이션에서 비동기 데이터 처리는 필수적이다. Observer, Subscription, subscribe()/unsubscribe()는 이러한 비동기 데이터 스트림을 효율적으로 관리하고 제어하기 위한 핵심적인 메커니즘을 제공한다. UI 이벤트 처리, HTTP 요청, WebSocket 연결 등 다양한 상황에서 활용될 수 있다.

3. 동작 원리

Observable은 데이터를 방출하는 주체이고, Observer는 데이터를 소비하는 주체이다. subscribe() 메서드는 이 둘을 연결하는 역할을 한다.

1. Observable의 subscribe() 메서드를 호출하면서 Observer 객체를 전달한다.
2. Observable은 값을 방출할 때마다 등록된 Observer의 next() 메서드를 호출한다.
3. 에러가 발생하면 Observer의 error() 메서드를 호출하고, 스트림은 종료된다.
4. Observable이 모든 값을 방출하고 완료되면 Observer의 complete() 메서드를 호출한다.
5. Subscription 객체를 통해 언제든지 구독을 해제하여 데이터 스트림을 중단할 수 있다.

4. 예제 (인라인 코드로만, fenced 코드블록 금지)

const observable = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next(3); subscriber.complete(); }); const observer = { next: value => console.log('Received:', value), error: err => console.error('Error:', err), complete: () => console.log('Completed!') }; const subscription = observable.subscribe(observer); // 잠시 후 구독 해제 setTimeout(() => { subscription.unsubscribe(); console.log('Unsubscribed!'); }, 2000);

먼저, Observable을 생성하고 값을 방출한다. 그다음, Observer 객체를 정의하여 값을 처리하는 메서드를 구현한다. subscribe() 메서드를 호출하여 Observable과 Observer를 연결하고 Subscription 객체를 받는다. 마지막으로, setTimeout을 사용하여 2초 후에 unsubscribe() 메서드를 호출하여 구독을 해제한다.

5. 실무 사용 사례

• 사용자 입력 처리: 텍스트 입력 필드에서 발생하는 keyup 이벤트를 Observable으로 변환하여 입력 값에 따라 자동 완성 기능을 구현할 수 있다.
• HTTP 요청: fetch API를 사용하여 데이터를 가져오는 비동기 요청을 Observable로 감싸고, 에러 처리 및 로딩 상태 관리를 보다 쉽게 할 수 있다.
• WebSocket 연결: WebSocket 연결을 통해 실시간 데이터를 수신하는 스트림을 Observable로 표현하고, 데이터를 변환하고 UI에 반영할 수 있다.

6. 주의할 점

• unsubscribe()를 호출하지 않으면 메모리 누수가 발생할 수 있다. 특히, 컴포넌트가 언마운트될 때 구독을 해제하는 것을 잊지 않도록 주의해야 한다.
• error() 핸들링을 제대로 하지 않으면 애플리케이션이 예상치 못하게 종료될 수 있다. catchError() 연산자 등을 사용하여 에러를 적절하게 처리해야 한다.

7. 핵심 정리

Observer는 데이터 스트림의 값을 처리하고, Subscription은 연결을 관리하며, subscribe()/unsubscribe() 메서드를 통해 데이터 흐름을 제어한다. 이 세 가지 요소는 리액티브 프로그래밍의 기초이며, 비동기 데이터 처리를 위한 강력한 도구를 제공한다.