[RxJS / angular] RxJS 란?

제가 앵귤러를 처음 시작하고 느낀 몇 가지 어려움 중 하나가 RxJS 였던 것 같습니다. 이번 포스트를 시작으로 RxJS에 대해 개념부터 Angular에서의 사용법까지 차근차근 다뤄보도록 하겠습니다.

---

RxJS는 무엇인가?

RxJS는 Reactive Extensions for JavaScript의 약자입니다. 처음에 Reactive Extension은 마이크로소프트에서 Rx.NET으로 개발했습니다. 그 이후로 Java, Python, Ruby, JavaScript를 비롯한 여러 다른 언어로 구현되었습니다. RxJS를 이용하는 프레임워크로는 Angular, React, Vue가 있습니다. 물론 JavaScript와 TypeScript와 같은 언어와 함께 RxJS를 쓸 수 있습니다. RxJS의 공식문서에 따르면 RxJS에 대한 정의를 다음과 같이 내리고 있는데요.

공식 문서에서 소개하는 RxJS의 정의

Observable을 사용하는 반응형 프로그래밍을 위한 라이브러리라는 말이 무슨말일까요? 이해를 쉽게 하기 위해서 빵공장에서 컨베이어 벨트 위에서 가공을 위해 끊임없이 내려오는 반죽과 유사하게 프로그램을 통해 흐르는 데이터와 이벤트를 관찰해서 무언가를 처리하는 방법으로 생각해보세요.

컨베이어(스트림)을 따라 내려오는 빵(이벤트, 데이터)들

Observable 이란 우리가 행위나 오브젝트를 관찰 하는걸 의미합니다. 빵공장에서는 컨베이어 벨트 위의 반죽을 관찰할 것이고, 프로그램에서는 데이터나 이벤트를 관찰하게 됩니다. 그리고 반응을 한다는 것은 관찰대상에 대해 어떠한 처리를 한다고 생각하면 됩니다. 컨베이어 벨트에서 우리의 관찰 대상인 반죽이 방출됩니다. 그리고 반죽이 나오면 반죽을 가공해서 모양도 바꾸고, 만약 불량 반죽이 있다면 처분한 후, 굽고 설탕을 코딩하여 여러 빵들과 함께 포장을 하는 등의 과정을 거치게 됩니다. 프로그램에서 생각해보면 이벤트로 데이터가 방출되면 데이터를 가공하고 필터링을 거쳐 여러 데이터와 함께 묶어 주기도 합니다.

 

RxJS는 비동기 처리에 탁월

RxJS는 비동기와 이벤트가 함께 작동하도록 설계되었습니다. 우리가 잘 알듯이 Http 리퀘스트와 리스폰스는 비동기식 입니다. 앵귤러에서는 RxJS를 사용하여 http의 비동기식 request와 response를 처리합니다. angluar서비스에서 http get 요청을 하고 그 결과 데이터는 즉시 반환되지 않습니다. 브라우저 측에서도 응답을 기다리지 않고 결과가 올 때 알려달라고 요청한 후 코드는 멈추지 않고 계속됩니다. 여기서 Observable인 관찰 대상은 요청에 대한 결과가 될 것입니다. 잠시 후 response가 수신되면 결괏값에 대한 처리가 이뤄지게 됩니다. 이렇게 비동기 처리를 하게 되면 브라우저는 reqeust가 서버에서 처리되고 돌아오는 동안 정상적으로 작동할 수 있습니다.

 

그래서 RxJS 란?

RxJS는 관찰이 가능한 Observable 시퀸스를 사용해서 데이터와 이벤트를 관찰하고 반응(처리)해주는 라이브러리로 다시 정의 내릴 수 있습니다. RxJS를 사용하면 비동기식 이벤트 기반 데이터를 더 잘 관리하고 조작할 수 있게 해 줍니다. 비동기식 이벤트는 Http response가 될 수도 있고 버튼을 클릭했을 때 발생하는 클릭 이벤트가 될 수도 있습니다.

---

RxJS가 무엇인지 이제 알게되었으니 왜 사용해야 하는지 궁금해지게 됩니다. 다음 포스트에서 RxJS을 왜 사용해야 하는지 알아보도록 하겠습니다.