Observable: 비동기 데이터 스트림을 다루는 리액티브 프로그래밍의 핵심

1. 개념

Observable은 subscribe() 메서드를 통해 값을 받을 수 있는 데이터 스트림이다. 데이터가 생성될 때마다 관찰자(Observer)에게 알림을 보낸다. Observable은 즉시 값을 방출할 수도 있고, 시간이 지난 후에 방출할 수도 있으며, 무한히 계속 값을 방출할 수도 있다.

2. 왜 사용하는가

Observable은 비동기 데이터 처리의 복잡성을 줄여준다. 데이터가 언제, 얼마나 발생할지 알 수 없는 상황에서 Observable을 사용하면, 데이터를 효율적으로 관리하고 처리할 수 있다. 특히 사용자 인터페이스(UI) 업데이트, API 호출, 이벤트 처리 등 비동기적인 작업이 많은 웹 개발에서 유용하다.

3. 동작 원리

Observable은 Observer에 의해 subscribe()된다. subscribe() 메서드는 세 가지 콜백 함수를 받는다.

• next: Observable이 새로운 값을 방출할 때 호출된다.
• error: Observable이 에러를 발생시킬 때 호출된다.
• complete: Observable이 더 이상 값을 방출하지 않음을 알릴 때 호출된다.

Observable은 값을 방출하면, 해당 값을 next 콜백 함수를 통해 Observer에게 전달한다. 에러가 발생하면, error 콜백 함수를 통해 전달하고, 완료되면 complete 콜백 함수를 호출한다.

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

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

위 예제는 1, 2, 3을 순차적으로 방출하고 완료되는 Observable을 생성한다. subscribe() 메서드를 통해 Observable을 구독하고, next, error, complete 콜백 함수를 정의하여 값을 처리한다.

5. 실무 사용 사례

• API 데이터 스트림: API로부터 데이터를 지속적으로 받아오는 경우 Observable을 사용하여 데이터를 스트림으로 처리할 수 있다.
• UI 이벤트 처리: 버튼 클릭, 키보드 입력, 마우스 이동 등 UI 이벤트를 Observable을 사용하여 처리할 수 있다.
• 실시간 데이터 업데이트: WebSocket을 통해 실시간으로 데이터를 받아오는 경우 Observable을 사용하여 데이터를 스트림으로 처리하고 UI를 업데이트할 수 있다.

6. 주의할 점

• Observable은 기본적으로 "cold" Observable이다. 즉, 구독할 때마다 새로운 데이터 스트림이 생성된다. "hot" Observable은 구독 여부와 관계없이 데이터를 방출한다.
• Observable을 제대로 해제(unsubscribe)하지 않으면 메모리 누수가 발생할 수 있다. subscription.unsubscribe()를 사용하여 구독을 해제해야 한다.

7. 핵심 정리

Observable은 비동기 데이터 스트림을 다루기 위한 핵심적인 개념이다. Promise와 이벤트와 유사하지만, 더 강력하고 유연한 방식으로 데이터를 처리할 수 있다. RxJS를 통해 Observable을 사용하면, 비동기 코드를 선언적으로 작성하고, 데이터 스트림을 쉽게 조합하고 변환할 수 있다. Observable을 효과적으로 사용하려면, subscribe() 메서드, Observer 인터페이스, 그리고 메모리 누수 방지를 위한 구독 해제를 이해해야 한다.