RxJS 살펴보기- 1

Reactive Programming

RxJS는 MS가 만든 ReactiveX의 JS 라이브러리로 이에 대해 공부하기 전에 먼저 Reactive 프로그래밍에 대해 아는 것이 좋다.
Reactive 프로그래밍은 이름 그대로 데이터의 변화에 반응한다는 뜻을 가지며, 비동기 데이터 스트림을 사용하여 프로그래밍한다.

변수, 이벤트, 데이터 구조 등 어떤 것이든 비동기 데이터 스트림이 될 수 있다.
이 비동기 데이터 스트림이라는 단어가 어색할 수도 있다. 하지만, 사실 비동기 데이터 스트림은 전혀 새로운 개념이 아니다.
이를 간단한 이벤트 처리 예제로 설명해보겠다.

대부분의 Plain JavaScript, jQuery 혹은 ReactJS 등 어떤 프레임워크/라이브러리를 사용했던지 간에 사용자로부터 발생한 비동기적인 이벤트를 처리해본 경험이 있을 것이다.
예를 들어 클릭 이벤트를 처리한다고 가정할 때 다음과 같이 처리할 수 있을 것이다.

button.addEventListener('click', (e) => { /* DO SOMETHING */ });

click stream : ---c---c---c-c---c----c-->

이벤트 리스너, 이벤트 핸들러 등을 통해 클릭 이벤트를 구독하고, 위와 같은 비동기적인 이벤트를 처리할 수 있다.

비동기 데이터 스트림도 마찬가지로 구독 가능하며, 이를 통해 데이터 혹은 사이드 이펙트를 안전하게 처리할 수 있다.
이벤트와 어느 정도 비슷하긴 하지만, 비동기 데이터 스트림는 아래와 같은 많은 연산을 수행할 수 있다.

• 스트림은 다른 스트림의 입력이 될 수(map) 있으며,
• 여러 스트림은 하나의 스트림으로 합쳐질 수도(merge/reduce) 있다.
• 또한, 스트림에 필터를 적용하여 관심 있는 스트림의 데이터만을 처리할 수도(filter) 있다.

이외에도 수많은 연산들이 존재한다.

이처럼 ReactiveX는 데이터를 효과적이고 안전하게 처리할 수 있게 해준다.

Observable

RxJS를 사용하기 위해서는 반드시 옵저버블을 이해해야 한다.
옵저버블은 간단히 말하면, 시간축 위의 데이터 집합의 표현이라고 할 수 있다.

데이터의 형태는 상관 없지만, 쉬운 예시를 위해 클릭 이벤트와 해당 좌표가 비동기적으로 발생한다고 가정한다. 클릭 이벤트와 그의 좌표를 도식화하면 다음과 같을 것이다.

It is a click stream
-----c-------c-------c------c------>
   (0, 5)  (3, 1)  (1, 4) (2, 2)

옵저버블의 특징

1. 옵저버블과 배열

옵저버블은 배열의 map, filter, reduce 와 비슷한 연산을 수행할 수 있다.
또한, 위의 도식화를 보면 옵저버블은 순서가 있는 데이터 집합으로써, 시간을 인덱스로 하며, 배열(불변 배열)과 유사하다는 것을 알 수 있다.

2. 불변성

옵저버블은 관찰만 가능하다.
이는 즉, 옵저버블은 불변이라는 뜻이며, RxJS는 Functional Programming 패러다임도 사용하고 있다는 것을 알 수 있다.

따라서, 어떤 옵저버블을 변형해야 한다면, 새로운 옵저버블을 만들어야 한다.

예제 : x 좌표가 2 이상인 새로운 스트림만들기

[0, 3, 1, 4]와 같은 배열에서 값이 2 이상인 원소만을 얻고자 할 땐, filter를 사용한다.

[0, 3, 1, 4].filter(x => (x >= 2));

옵저버블도 마찬가지로 filter를 사용하며, 다음과 같이 코드를 작성할 수 있다.

Rx.Observable
  .fromEvent(element, 'click')
  .filter(e => (e.clientX >= 2));

정리

RxJS를 공부하기 전에 알고 있어야 할 Reactive Programming과 옵저버블에 대한 간단한 개념을 알아보았다.

정리하자면,

Reactive Programming은 데이터의 형태(이벤트, 입력, 변수 등)가 어떻든 간에 이를 효과적이고 안전하게 처리할 수 있다는 장점이 있으며,
옵저버블은 인덱스가 시간인 불변 배열과 유사한 형태를 가진다고 볼 수 있다.

다음에는 Observable의 Combination 연산에 대해 알아보겠다.