Observable
옵저버블(Observable)은 단어 의미인 '관찰 할 수 있는'을 생각 해보면 이것이 어떠한 일을 해야하는지 짐작 가능하다.
개념적으로 어떠한 데이터를 옵저버(Observer)가 처리할 수 있도록 포장하는 작업을 담당한다고 보면 된다.
Observer
옵저버(Observer)는 옵저버블에서 관찰 할 수 있는 형태로 전달한 데이터를 받고 이에 대한 행동을 취한다.
전달 받은 데이터를 가지고 화면 UI를 업데이트 하다던가 서버에 요청을 하는등 최종적으로 처리할 작업은 담당한다.
이러한 옵저버를 사용할 때 RxJS를 이용하여 사용할 수 있다.
RxJS(Reactive Extensions For JavaScript)
RxJS의 Rx는 'Reactive Extensions'의 줄임말로 ReactiveX API를 사용한다.
Reactive Programming을 하기 위해 RxJS를 사용하는 것이다.
리액티브 프로그래밍(Reactive Programming)이란 비동기 데이터 스트림에 기반을 둔 프로그래밍으로, 배열 등의 데이터를 데이터 스트림이라는 일관된 형식으로 만들고 이를 구독하여 데이터 스트림의 상태변화를 관찰(observe)하고 반응하는 애플리케이션 방식이다.
스트림(stream)?
- 스트림(stream)이란 실제의 입력이나 출력이 표현된 데이터의 이상화된 흐름을 의미한다.
- 즉, 스트림은 운영체제에 의해 생성되는 가상의 연결 고리를 의미하며, 중간 매개자 역할을 한다.
상태변화를 관찰, 반응하는 방식인 리액티브 프로그래밍과 훅스(Hooks)를 사용하는 리액트와 별 차이가 없어 보인다.
하지만 리액트와 리액티브 프로그래밍의 차이는 architecture의 차이에 있다.
아키텍처(architecture)?
- 최적화를 목표로 두고 시스템 구성과 동작원리 그리고 시스템의 구성환경등을 설명 및 설계하는 청사진 또는 설계도 이다.
리액트의 훅스는 컴포넌트 렌더링의 중점을 둔 개념이고 이는 비동기적인 이벤트 스트림을 처리하려고 만들어진 리액티브 프로그래밍과는 시작점 자체가 다르기 떄문에 이 둘에는 분명한 차이점이 존재한다.
그렇다고 해서 완전히 상충된다는 의미는 아니고 둘은 충분히 같이 쓰일 수 있다.
리액트와 RxJS의 바인딩들을 제공해주는 👉오픈소스 프로젝트도 존재하니 참고하면 좋을 것 같다.
출처: Jane Shin, RxJS 의 이해와 사용
