쉽게 써봅시다. RxJS! 손찬욱 - hochan222/Everything-in-JavaScript GitHub Wiki

동영상 보기

Rxjs란?

비동기처리를 원활하게 할 수 있는 데이터 스트림이다.

Callback, Promise, Generator, Async/Await...들도 표준인데... 물론 RxJS도 표준에 제안 중...

왜 RxJS를 써야하는가?

RxJS가 담당하는 영역: 비동기 처리, 데이터 전파, 데이터 처리

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

모든 어플리케이션은 궁극적으로 상태머신이다.

개발자가 처리하는 입력값(Input)은 어떤 것들이 있는가?

배열 데이터, 함수 반환값, 키보드를 누르는 것, 마우스를 움직이는것, 원격지의 데이터, DB데이터 등등

개발자의 고민중 하나

어떤 것은 동기(Synchronous), 어떤 것은 비동기 (Asynchronous)
어떤 것은 함수호출(Call), 어떤 것은 이벤트(Event)
어떤 것은 Callback, 어떤 것은 Promise

각각에 따라 처리해야 한다.

➡ 시간축 관점에서 결국 동기 === 비동기

RxJS: 하나의 방식으로 처리하자, 인터페이스의 단순화

어떤 것은 동기(Synchronous), 어떤 것은 비동기 (Asynchronous)
어떤 것은 함수호출(Call), 어떤 것은 이벤트(Event)
어떤 것은 Callback, 어떤 것은 Promise

모두 Observable로 처리한다.

모든 어플리케이션은 궁극적으로 상태머신의 집합이다.

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

Reactive Programming

데이터 흐름과 상태 변화 전파에 중점을 둔 프로그램 패러다임이다. 사용되는 프로그래밍 언어에서 데이터 흐름을 쉽게 표현 할 수 있어야하며 기본 실행 모델이 변경 사항을 데이터 흐름을 통해 자동으로 전파한다는 것을 의미한다.

이미 우리는 알고 있었다.

Observer pattern

Subject의 변경사항이 생기면 자동으로 Observer의 update를 호출한다.

RxJS에도 Observer Pattern을 적용하자. 상태 자동전파 (Loosely Coupling)

개선된 Observer pattern

next, error, complete의 3가지 상태를 전달 받는다.

데이터를 받은 후에는 뭐하니?

데이터를 받은 후에 받은 데이터를 가공한다.

개발자의 고민중 하나... 조건문, 반복문 덩어리로 구성됨.

조건문은 코드의 흐름을 분리하고,
반복문은 코드의 가독성을 떨어뜨림.

주 관심사인 비지니스 로직은 코드에 파묻힘

RxJS는 고차함수를 제공한다.

고차함수 (High Order Function)

다른 함수를 인자로 받거나 그 결과로 함수를 반환하는 함수.

고차 함수는 변경되는 주요 부분을 함수로 제공함으로서 동일한 패턴 내에 존재하는 문제를 손쉽게 해결 할 수 있는 고급 프로그래밍 기법이다.

filter, map, reduce, ...와 같은 고차 함수의 operator를 제공

개발자의 고민 중 하나... 내가 실행한 로직이 나의 의도와 상관없게 외부에 영향을 미친다면? (Side Effect)

Side Effect

함수에 드러나지 않은 입력값을 부원인(Side Cause)라고 하고 이로 인해 발생한 결과를 부작용(Side Effect)

호출 할 때마다 달라... ㅠㅠ

Functional Programming

함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하고 상태 변경과 가변 데이터를 피하려는 프로그래밍 패러다임의 하나이다.

Functional Programming은 순수함수를 지향한다.

  • 같은 입력이 주어지면, 항상 같은 출력을 반환한다.
  • 부작용(side-effect)를 발생시키지 않는다.
  • 외부의 Mutable한 데이터에 의존하지 않는다.

RxJS도 함수형 프로그래밍의 순수함수를 지향한다.

Observable 자체가 Immutable.

RxJS에서 다루는 중요 개념은 다음과 같다.

  • Observable
  • Operator
    • reduce, filter, ...
  • Observer
  • Subscription
    • Observabler과 Observer의 연동 관계를 나타냄.
  • Subject
  • Scheduler

RxJS 개발 방법

  1. 데이터 소스를 Observable로 생성.
  2. Observable의 operator를 사용
  • 데이터를 변경. 추출. 합침. 분리
  1. 원하는 데이터를 받아 처리하는 Observer를 만든다.
  2. Observable의 subscribe를 통해 Observer를 등록한다.
  3. Observable 구독을 정지하고 자원을 해지한다.

click Event가 발생하면 pluck라는 메소드를 이용해서 원하는 특정 currentTarget을 뽑아내서 받고 그걸 Observer로 만들고 subscribe한다.

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