[RxJS / angular] RxJS를 사용하는 이유

어떠한 장점이 있길래 앵귤러에서는 기본 패키지에 포함돼서 RxJS가 인스톨되고 사용하기를 권장하는 걸까요?

 

다른 기술도 있는데 왜 RxJS 써야할까?

비동기 및 이벤트 기반 데이터를 관리하는 다른 여러 기술들이 있습니다. 왜 다른 기술 대신에 RxJS를 써야 할까요? 간략히 비동기를 처리를 해주는 기술을 생각해보겠습니다.

1. Callback : 콜백은 비동기 작업이 완료된 후 다시 호출할 수 있는 함수이지만 중첩된 비동기 작업을 해야 할 때는 콜백을 관리하기가 어려워집니다.
2. Promise : Promise는 비동기 처리가 이뤄진 후 미래의 어떤 시점에 결과 하나를 생성하는 객체입니다. 단일 방출만 처리할 수 있으며 취소할 수는 없습니다.
3. Async/Await : Asunc와 Await를 사용하면 동기적으로 보이는 비동기 코드를 작성할 수 있습니다. 단일 방출만 처리할 수 있으며 취소할 수 없습니다.

RxJS를 사용하면 몇 가지 장점이 있습니다.

1. RxJS는 한 가지 테크닉으로 모든 유형의 데이터 작업을 할 수 있습니다. 프로그램에서는 키보드와 마우스 이벤트, 라우팅, 파일의 데이터, 데이터베이스, 서드파티 API 등과 같이 여러 소스에서 데이터를 받게 됩니다. RxJS를 사용하면 동일한 테크닉과 연산자를 사용해서 여러 소스의 데이터를 작업할 수 있습니다.
2. 앱에서는 때때로 여러 소스에서 결합된 데이터가 필요할 수 있습니다. RxJS는 여러 데이터를 쉽게 결합할 수 있습니다.
3. RxJS는 시간이 흐름에 따라 여러 값을 생성할 수 있으며 푸시 모델을 사용하여 데이터가 발생했을 시 상호 작용하여 변경 사항을 쉽게 확인하고 반응할 수 있습니다.
4. RxJS는 Lazy로 작동합니다. 평가는 구독을 하기 전까지 시작되지 않습니다. 기능 레시피를 만들어놓고 결괏값이 필요할 때 구독하여 실행하면 됩니다.
5. 훌륭한 사용자 경험을 위해서는 오류를 정상적으로 처리해야 합니다. RxJS에는 에러 처리 기능이 내장되어 있습니다.
6. RxJS를 사용하면 비동기 작업을 취소할 수 있습니다. 예를 들어 아이템 A를 클릭한 후 아이템 B를 클릭하면 A에 대한 요청을 취소하고 아이템 A을 반환할 수 있습니다.

앵귤러에서 RxJS를 사용하는 장면을 살펴보겠습니다.

1.Routing

this.route.paramMap
this.route.data
this.router.event

라우팅은 앵귤러 앱을 만들 때 필연적인 부분입니다. 그리고 초보 앵귤러 개발자가 많이 헷갈리는 부분이기도 합니다. 헷갈리는 이유 중 하나가 RxJS를 사용하는 것도 한몫하는 것 같습니다. Angular에서는 RxJS와 라우팅을 사용하여 매개변수, 경로 데이터, 라우터 이벤트의 변경사항을 감시할 수 있습니다.

 

2.ReactiveForm

this.myForm.valuChanges

리액티브 폼에서도 RxJS의 사용이 이루어집니다. 이로 인해 더욱 리액티브 한 프로그램을 할 수 있게 되는데요. ReactiveForm 역시 처음 앵귤러를 공부할 때 선뜻 받아들이기 힘든 부분이기도 합니다.  ReactiveForm을 사용하면 유저가 폼에 입력 요소를 수정하거나 서버와 통신 후 값을 폼에 반영하는 등 폼에 대한 변경사항을 감시할 수 있습니다.

 

3.HttpClient

getMovie(): Observable<movie[]> {
  return this.http.get<Movie[]>(this.url);
}

HttpClient를 사용하여 request를 보내고 response를 받습니다. 이때도 RxJS를 사용하게 됩니다. Observable을 구독하지 않으면 절대 http request를 발생하지 않습니다. 그리고 response가 관찰하던 Observable을 이용해서 데이터를 받아 에러 처리 및 정상처리를 할 수 있습니다.

 

앵귤러가 핵심 라이브러리로 RxJS를 설치하는 이유는 이러한 다양한 장면에서 RxJS 기술을 사용하기 때문입니다.  또한 보다 리액티브 한 개발을 위해 RxJS를 사용할 수도 있습니다.

 

---

여기까지 수고하셨습니다. RxJS의 필요성을 알았으니 본격적으로 공부를 시작해 보도록 하겠습니다.