210620 RxJS (작성중...)

RxJS
본 블로그 포스팅은 RxJS와 관련하여 네이버의 손창욱님이 올려주신 유튜브 영상을 보고 정리해보았다.

RxJS를 처음 접하는 나와 같은 사람도 정말 쉽게 이해할 수 있도록 설명을 해주셔서 너무 유익했다.

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

Input(입력값)이 들어오면 logic을 통해 state가 업데이트되고, 업데이트된 state는 logic을 통해 Output(결과값)이 나온다.

RxJS

RxJS는 비동기 처리를 원할하게 할 수 있도록 도와주는 데이터 스트림으로 정의할 수 있다.

RxJS를 학습하기 위해서는 여러 새로운 용어들이 등장한다.(개별적으로 정리해서 공부)

동기/비동기 방식의 사용

동기 방식은 흐름이 그대로 가기 때문에 흐름을 쉽게 파악할 수 있지만, 비동기 처리는 굉장히 느린 처리나 사용자로부터 빠르게 interaction을 받아와야 하는 경우 그리고 높은 퍼포먼스가 요구되는 상황에서 사용이 된다.

RxJS의 역할

RxJS이외에도 Callback, Promise, Generator, Async/Await과 같은 표준을 사용하여 비동기 처리를 할 수 있는데 왜 굳이 RxJS를 사용해야 될까?

Callback함수를 사용해서 비동기 처리를 하는 경우, 에러에 대한 처리가 어렵고, 콜백 헬등의 분제가 발생한다.
Promise를 사용하는 것이 좀 더 나은 방법이긴 하지만, 한 번에 하나의 데이터를 처리하기 때문에 연속성을 갖는 데이터를 처리할 수 없다는 점과 서버로 보낸 요청을 취소할 수 없다는 단점이 있기 때문에 Observable을 사용하여 위의 단점을 보안해서 비동기 처리를 할 수 있다.

그리고 RxJS는비동기 처리 영역, 데이터 전파, 데이터 처리를 담당하며, 일관된 방식으로 안전하게 데이터 흐름을 처리하는 라이브러리이다.
여기서 일관된 방식이란 입력된 값의 타입에 따라 각 각 따로 처리를 하지 않고 하나의 방식으로 처리를 할 수 있다는 말이다.

  • [참고] 입력값에 따른 데이터 처리

    개발자가 처리하는 입력값에는 어떤 것들이 있을까?
    (1) 배열 데이터, 함수 반환값 : 동기 데이터를 처리하는 방식
    (2) 키보드/마우스 입력, 원격지 데이터, DB 데이터 : 비동기 데이터를 처리하는 방식

    위와 같이 RxJS이외의 Callback, Promise, Generator, Async/Await과 같은 표준을 사용하여 비동기 처리를 하게 되면, 데이터 처리 방식이 제각각이기 때문에 각기 다른 방식으로 처리를 해줘야 한다.

    하지만 RxJS는 동기/비동기와 관계없이 데이터를 시간축을 기준으로 연속적인 데이터 스트림으로 처리한다.

Read more