나는 Rxjs를 왜 쓰는가?

도움! Rxjs!

  이 글을 쓰게 된 동기가 된 손찬욱 님의 블로그. Rxjs에 대한 개념이 포스팅된 사이트이다.

  내가 처음 Rxjs를 만난 것은 Angular를 쓰면서 이다.  앞선 글인 웹 뉴비의 Angular 1년 -상-에서 말했 듯 그 당시의 나는 비동기는 커녕 콜백도 모르던 시절이었다. 그리고 그 때는 눈앞에 학점이 걸린 시스템 프로젝트를 어서 수행해야 했기 때문에 콜백은 건너뛰고 '비동기가 무엇인가.', '왜 이렇게 되는가.' 와 'Rxjs를 어떻게 써야 하는가.'에 대한 고민만 하였다. 그렇게 인생 첫번째 Angular 프로젝트가 끝나고 휴학을 하며 일을 하면서, 또 계속해서 Angular를 쓰면서 Rxjs를 쓰는 것은 그냥 당연한 것이었다. 왜냐면 Angular에서 쓰고 있으니까.

  그러던 중, Async/Await(이하 Async)가 표준으로 들어간다는 것을 인터넷에서 보았고 '얘네는 원래 표준이 아니였던거야?' 라는 생각과 함께 다시 관심있게 보게 되었다. Async는 비동기를 처리하기 위해 나온 것으로 Async를 이용해 비동기 함수를 정의 한다. 비동기 함수의 실행결과는 Promise를 반환한다. 또, Rxjs 역시 비동기, 콜백을 처리하기 위해 나왔으며 Rxjs를 이용한 결과 값은 Observable을 반환한다. 일단, 개념은 비슷해 보이는데 Promise와 Observable의 차이점이 무엇일까.

  Promise와 Observable의 가장 큰 차이점은 하나의 Promise는 단 1개의 값을 처리 할 수 있지만, Observable을 스트림으로 연결된 여러 값을 처리 할 수 있다는 것이다. 예를 들자면, HTTP 프로토콜에 의해 보내진 Request는 1번에 1개의 응답을 불러오기 때문에 Promise와 Observable 모두 처리 가능하다. 하지만, 키보드 입력 같이 시간 별로 여러 값이 날아온다면, Promise는 이 키보드 입력을 각각 처리 해야하지만, Observable은 하나의 스트림으로 연결해 한번에 관리 할 수 있다.

  그렇다면, Observable은 어떻게 이것이 가능한 것일까. 그것은 앞서 말한 스트림 때문이다. 스트림은 시간 그래프 라고 생각해도 되는데, 예시는 아래 그림과 같다.

Rxjs를 한눈에 볼 수 있는 그림

 위의 그림에서 시간 그래프는 왼쪽에서 오른쪽으로 흐른다. 즉, 왼쪽이 더 오래된 시간인 것이다. 별 표에서 부터 마름모 까지 흐르는 시간 그래프에 세로 줄은 스트림이 끝나는 것을 뜻한다. 이 스트림이 flip이라는 함수를 만나서 처리가 되면 결과 값도 스트림이 되어 나오는데 처리 도중에 에러가 나게 되면 X표 처럼 표시되고 스트림은 거기서 끝나게 된다. 여기까지 위 그림에 대한 설명이었다. 위 그림에서 유심하게 봐야할 것은 스트림에는 여러 값들이 들어가 있는 것과 스트림을 넣으면 스트림이 나온다는 것이다.

체이닝 예시

  여러 값이 들어 있는 것은 앞서 말했 듯 Promise와 가장 큰 차이점이고, 스트림의 처리 결과 값이 스트림인 것은 결국 다시 다른 Rxjs 함수를 체이닝 해서 적용할 수 있다는 점이다. 이것은 Rxjs를 이용해 쉽게 데이터 처리를 할 수 있다는 것을 뜻한다. 또, Rxjs는 여러 스트림을 한 스트림으로 묶을 수도 있고, 한 스트림을 여러 스트림으로 나눌 수도 있기 때문에 비동기로 호출한 여러 데이터들에 대해서도 유연하게 처리할 수 있다.

  Rxjs를 Angular로 처음 마주한 사람이라면 Angular에서 사용하는 Rxjs는 오버 테크놀로지가 아닐까 할 수도 있다. 왜냐하면, Angular에서 Rxjs를 가장 많이 사용하는 곳은 API를 호출 할 때이고, 그 때는 Async로 해도 문제가 될 것이 없어 보이기 때문이다. 하지만 Rxjs의 여러 고차원함수들 덕분에 API를 통해 호출한 데이터들을 손쉽게 가공할 수 있기 때문에 나는 Async보다는 Rxjs를 더 선호하게 된 같다. 또 Rxjs는 함수형 언어처럼 쓸 수 있기 때문에 불필요한 제어문이나 반복문이 없이 깔끔한 코드를 유지 할 수 있다.

  나는 Angular 외에서도 Rxjs를 쓴 경험이 있는데 예시로 게임 추천 시스템을 리뉴얼 할 때 Rxjs(version 4)를 이용했다. 백엔드에서 데이터 처리 로직을 짤 때 Rxjs를 이용하면 쉽게 할 수 있지 않을까 하는 생각을 가지고 했다. 물론 쉽지는 않았지만, 콜백을 이용해서 데이터를 불러오고 처리하는 것에 비하면 쉽고 빠르게 또 가독성 좋게 만들어 냈다. 이러한 경험을 비추어봤을 때, Rxjs는 처음에 스트림에 대한 이해가 조금 필요하지만, 스트림이 익숙해진다면 비동기 이벤트를 아주 손쉽게 처리할 수 있는 라이브러리이다.