RxJS를 써야하는 이유!!

RxJS에 대해 이것저것 자료를 찾아보다가 <RxJS 퀵스타트>의 저자이신 sculove님의 강의를 보게되었다.
쉽고 깔끔하게 RxJS를 써야하는 이유를 개발자들이 평상시 하는 고민과 함께 연결하여 설명해주셨는데
강의 내용을 두고두고 기억하고 싶어서 내용을 정리해보았다.

이제 아무 생각 없이 RxJS를 쓰는 것이 아니라 쓰는 이유를 알고 효율적으로 코드를 짤 수 있겠..지? ㅠㅠ?

(영상과 블로그는 아래 링크 참고)

https://www.youtube.com/watch?v=2f09-veX4HA&feature=youtu.be

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

RxJS 써야겠어요? 안써야겠어요?

---

RxJS = 일관된 방식으로 안전하게 데이터흐름을 처리하는 라이브러리다

써야하는 이유를 보기 전에,  (RxJS을 써야하는 본질) RxJS가 담당하는 영역은 :

1) 비동기처리
2) 데이터 전파
3) 데이터 처리

---

모든 어플리케이션 = 상태머신들의 집합

(1) 입력값을 받고 로직을 통해 상태 변화를 하고 결과값을 도출한다
-> (2)에게 전달
-> 입력값을 받고 로직을 통해 상태 변화를 하고 결과값을 도출한다
-> (3)에게 전달 
-> ...

개발자의 고민 1 : 의존관계가 있는 상태머신에게 변경된 상태정보를 어떻게 전달? 

- Reactive Programming :
상태가 변경되면, 변경된 데이터를 개발자가 인지하고 전달하는게 아니라 자동으로, 빠르게 전파하는 것 (핵심)

- Observer Pattern :
observer는 subject를 구독만하면 ok, subject에 변화가 생기면 자동으로 변경된 데이터 전달받는다
즉, subject&observer의 관계가 약해지기 때문에 쉽게 변경사항을 적용할 수 있다

▶ RxJS : 개선된 Observer Pattern 제공
next(status), error(error), complete() 3가지 상태를 전달받을 수 있다

---

개발자의 고민 2 : 입력값은 어떤 것들이 있는지 (배열, 함수, 이벤트, db데이터…)
-> 동기/비동기 처리

형태에 따라 (함수의 호출, 이벤트, 콜백, 프로미스) -> 각각 따로 처리해야 한다? => 버그 발생한 가능성 높음!

모든 데이터는 시간의 축을 기준으로 배열의 컬렉션으로 온다. (시간축 관점에서 보면 동기&비동기는 같다)

 

▶ RxJS : 복잡하고 다양한 방식 -> 하나의 방식으로 처리한다 *인터페이스의 단일화

Observable = 시간을 인덱스로 둔 컬렉션 (시간의 축을 둠)
여러 형태 (함수의 호출, 이벤트, 콜백, 프로미스 등) -> 모두 Observable로 처리한다!

---

- 데이터 받은 후 -> 데이터 가공
- 원하는 데이터를 얻기 위해 복잡한 추출 과정을 거쳐야 한다

개발자의 고민 3 : 조건문, 반복문 덩어리로 구성됨 

- 조건문 : 코드의 흐름 분리, 반복문 : 코드의 가독성을 떨어뜨림 => 비즈니스 로직은 코드에 파묻힘 (코드찾는데 시간이 걸린다)

▶ RxJS : 고차함수를 제공 = 다른 함수를 인자로 받거나 그 결과로 함수를 반환하는 함수
- filter, map, reduce와 같은 operator 제공 : 동일패턴으로 문제를 해결할 수 있음

---

개발자의 고민 4 : 내 로직이 외부에 영향을 미친다면? (Side Effect)

ex) object를 입력받았는데, 속성을 바꾸게 된 경우

=> 레퍼런스를 바꿔서 immutable 데이터로 만들어서 컨트롤 하기 편하게 만드는 해결방법이 있음

- Functional Programming : 수학적인 계산에 의해서 나온 것, 상태 변경과 가변 데이터를 피하려는 프로그래밍 패러다임
-> 순수 함수 지향, 같은 입력을 넣으면 같은 출력을 반환

▶ RxJS : 이러한 순수함수를 지향함

- Observable 자체가 Immutable
Observable -> operator 사용 -> 새로운 Observable, 첫번째 Observable 기준으로 데이터를 받음

- mutable : 레퍼런스는 같은데 값이 변경됨
- Immutable : 값이 변경되면 레퍼런스가 새로 나옴

---

- RxJs 개발방법

1) 모든 데이터 소스 -> Observable로 생성

2) operator 사용 -> 데이터를 변경/추출/합침/분리 (핸들러 붙일 필요 없음)

3) observer -> 원하는 데이터를 받아서 처리함

4) Observable - subscribe - Observer 등록

5) 구독 정지 - unsubscribe()

---

RxJS 란,

일관된 방식으로 = observable로 만듬

안전하게 = 외부 상태의 영향을 받지 않음

데이터흐름을 = 데이터 소스 ~ 개발자가 원하는 observable까지 데이터가 흘러감

처리하는 = 원하는대로 가공

라이브러리다