Push 기반 데이터 흐름: 데이터 생산자와 소비자의 분리를 통한 비동기 처리

1. 개념

Observable은 데이터 스트림을 나타내는 객체입니다. 데이터 스트림은 시간의 흐름에 따라 발생하는 값들의 연속입니다. Observable은 마치 배열(Array)과 유사하지만, 배열은 정적인 데이터 집합인 반면, Observable은 동적으로 값이 추가될 수 있다는 점이 다릅니다. 데이터는 Observer에 의해 구독(subscribe)되면, Observable은 데이터를 Observer에게 ‘push’ 방식으로 전달합니다.

2. 왜 사용하는가

전통적인 프로그래밍 방식에서는 데이터가 필요할 때마다 요청(pull)하는 방식이 일반적입니다. 하지만 실시간 데이터 처리, 사용자 인터랙션, 서버 응답 등 많은 경우 데이터가 언제 발생할지 예측하기 어렵습니다. 이럴 때 Push 기반 데이터 흐름을 사용하면 데이터가 발생하는 즉시 처리할 수 있어 효율적입니다. 또한, 복잡한 비동기 로직을 간결하고 가독성 좋게 작성할 수 있다는 장점이 있습니다.

3. 동작 원리

Observable은 Observer를 구독(subscribe)하면, 데이터 스트림에서 새로운 값이 발생할 때마다 Observer의 next() 메서드를 호출합니다. 에러가 발생하면 error() 메서드를 호출하고, 스트림이 완료되면 complete() 메서드를 호출합니다. 즉, 데이터 생산자 역할을 하는 Observable이 데이터를 만들 때마다 소비자 역할을 하는 Observer에게 알리는 방식입니다.

4. 예제

const observable = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next(3); subscriber.complete(); }); observable.subscribe({ next: (value) => console.log('받은 값:', value), error: (err) => console.error('에러:', err), complete: () => console.log('스트림 완료') });

위 예제에서 Observable은 숫자 1, 2, 3을 순차적으로 내보내고, 스트림이 완료되면 complete()를 호출합니다. subscribe() 메서드를 통해 Observer를 등록하고, next(), error(), complete() 메서드를 구현하여 데이터를 처리합니다.

5. 실무 사용 사례

• UI 이벤트 처리: 버튼 클릭, 마우스 이동, 키보드 입력 등 사용자 인터랙션을 Observable로 표현하여 이벤트 핸들러를 간결하게 관리할 수 있습니다.
• API 요청: HTTP 요청을 Observable로 표현하여 응답 데이터를 스트림으로 처리할 수 있습니다.
• 실시간 데이터 스트림: 웹소켓(WebSocket)이나 서버 센티드 이벤트(Server-Sent Events)를 통해 실시간으로 들어오는 데이터를 Observable로 표현하여 처리할 수 있습니다.

6. 주의할 점

Observable은 기본적으로 ‘cold Observable’입니다. 즉, 구독(subscribe)이 시작되는 시점에 데이터 스트림이 생성됩니다. share() 등의 연산자를 사용하여 Observable을 ‘hot Observable’으로 만들 수 있습니다. 메모리 누수를 방지하기 위해 구독(subscribe)을 해제(unsubscribe)하는 것을 잊지 않도록 주의해야 합니다.

7. 핵심 정리

Observable은 Push 기반 데이터 스트림을 생성하고 관리하는 핵심 객체이며, 리액티브 프로그래밍의 기반입니다. 데이터 생산자와 소비자의 분리를 통해 비동기 처리를 효율적으로 관리하고, 복잡한 로직을 간결하게 작성할 수 있습니다. Observer를 통해 데이터를 수신하고, subscribe() 메서드를 통해 구독을 시작하며, unsubscribe() 메서드를 통해 구독을 해제합니다.