RxJS

Angular RxJS 공부를 하다가 손찬욱님의 세미나 강의를 듣고 정리해본다. 

RxJS

RxJS는 이벤트 스트림과 데이터를 쉽게 만들고 다룰 수 있도록 도우는 라이브러리다.

복잡하지만 가독성이 좋은 비동기적 코드를 더 쉽게 작성할 수 있도록 도운다.

RxJS는 일관된방식으로 안전하게 데이터 흐름을 처리하는 라이브러리 - 손찬욱 강좌 발췌 - 

RxJS는 비동기 처리, 데이터 전파, 데이터 처리를 담당한다.

모든 어플리케이션으로 궁극적으로 상태머신의 집합이라고 할 수 있다.

대부분의 프로세서의 궁극적인 과정을 정리해주셨다.

출처: http://sculove.github.io/blog/2017/10/21/shoulduserxjs/ 손찬욱님 블로그

여기에서 개발자가 처리하는 Input의 종류들은 다양하다

배열, 함수, db 등등

여기서 개발자는동기(Synchronous)와비동기(Asynchronous), 함수호출(call), 이벤트, 콜백, 프로미스 등을 각각 처리해야하는데

RxJS는 하나의 방식으로 처리해 인터페이스를 단일화 시켜준다. 

(모두 Observable 처리)

RxJS에서 사용하는 Pattern에 앞서 

기존 Observer Pattern 이다. (Observer Pattern을 사용하는 이유에 대해서도 나중에 알아보자)

출처: http://sculove.github.io/blog/2017/10/21/shoulduserxjs/

RxJS는 이 Observer Pattern을 사용하여 다음과 같이 사용한다.

출처: http://sculove.github.io/blog/2017/10/21/shoulduserxjs/

실제로 코드에서 보면 다음과 같다.

    subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;

나같은 경우에는 이런식으로 사용해봤다.

라우터 기능중에서 navigate는 다음과 같이 되어있다.

navigate(commands: any[], extras?: NavigationExtras): Promise;

그리고 밑에 처럼 사용

 // this.router.navigate 을 할 때 data가 있을 때 쿼리 파람으로 data를 보낸다.
data === null ?	this.router.navigate([link]) : this.router.navigate([link], {queryParams: {data: data}});

 // ActivatedRoute를 구독(subscribe)하여 params(next)가 되면 다음과 같은 로직을 처리한다.
		this.routeActivate.queryParams.subscribe(
			params => {
				if (params['data']) {
					this.goPage(this.page);
				}
			}
		);

이 이외에도 restful 방식의 개발에서도 Observable을 이용한 http 통신도 사용할 수 있다.

참고 : https://hyunseob.github.io/2016/10/09/understanding-reactive-programming-and-rxjs/

http://sculove.github.io/blog/2017/10/21/shoulduserxjs/