[RxJS / angular] 5. RxJS 오퍼레이터(연산자) 개요, pipe 동작 이해하기

RxJS 오퍼레이터(연산자)란? 

RxJS 연산자는 옵저버블에서 방출된 항목을 변환하고 조작하는 함수 입니다. 이러한 오퍼레이터는 옵저버블에서 pipe메소드안의 인수로 사용하게 되고 여러 개의 연산자를 순서대로 적용할 수 있습니다. 

위 예에서는 Observable의 pipe 메소드를 사용하여 오퍼레이터를 순서대로 map, tap, take 세 개를 사용하고 있습니다. 예에서 of는 세 개의 숫자를 방출하는 옵저버블 입니다. 옵저버블의 pipe 메소드를 호출하면서 쉼표로 구분하여 연산자를 전달하고 있습니다. 대부분의 연산자에는 하고 싶은 작업을 정의하는 인수가 필요하게 됩니다. map과 tap에서는 옵저버블에서 방출된 항목에 대해 해야 할 일을 정의하는 화살표 함수를 건네주었고, take에서는 3을 건네주고 있습니다. 

 

옵저버블에서 pipe의 작동 방식 

pipe의 작동 방식에 대해 알아보도록 하겠습니다. 아래 예에서 우리의 원래 옵저버블은 소스 옵저버블 of(1,2,3) 입니다. 

이 of 옵저버블에 pipe 메소드를 사용하고 있습니다. 구독을 하면 소스 옵저버블이 항목을 방출하기 시작합니다. pipe가 없었다면 1, 2, 3이 콘솔에 출력될 것인데요. pipe메소드를 사용하면 각 항목은 일련의 연산자를 통과하면서 순서대로 파이프를 지나게 됩니다. 위 예에서 처음에 1이 각 연산자를 통해서 내보내지고 처리됩니다. 그런 다음 4가 내보내지고 각 연산자를 통해 처리됩니다. 마지막 연산자에 의해 출력되는 값은  옵저버의 next 메소드에 의해 처리된 값이 옵저버블로 내보내지고 이를 다시 구독에 전달하게 됩니다. 오퍼레이터(연산자)들을 방출된 각 항목에 대해 정의한 작업 집합을 수행하는 파이프라인으로 생각할 수 있습니다. 좀 더 세부적인 부분으로 각 단계를 구분해 살펴보겠습니다. 

연산자가 만들어주는 옵저버블 체인

첫 번째 연산자 map의 경우 Observable은 of에서 오는 입력입니다. 소스 옵저버블을 구독하면(subscribe 메소드 호출) pipe 메소드로 건네준 연산자는 자동으로 입력 옵저버블을 구독하고 출력 옵저버블을 생성 후 반환합니다. 항목이 옵저버블에서 방출되면 연산자는 연산자의 인수에 정의된 대로 처리한 후 옵저버블로 항목을 다시 방출하게 됩니다. 즉 map 연산자에서 옵저버블을 구독하고 화살표 함수에서 정의된 곱하기 4 처리를 한후 다시 옵저버블을 만들어 방출 하게 됩니다. 이 옵저버블이 다음 연산자에 tap에 대한 Observable 입력이 됩니다. 이렇게 연산자는 자동으로 옵저버블을 구독하고, 출력으로 옵저버블을 반환합니다. 그리고 그 옵저버블은 시퀀스에서 다음 연산자에 대한 입력이 되고, 다음 연산자도 옵저버블을 구독하여 입력을 받아드리고, 출력 옵저버블을 생성하고 반환하는 과정을 연산자 수 만큼 거치게 됩니다. 따라서 소스 옵저버블을 구독하면 각 연산자는 옵저버블 입력을 받아 구독하고 방출을 관찰하게 됩니다. 옵저버블의 마지막 출력은 옵저버에게 보내는 최종 결과가 되고 옵저버블 파이프라인의 작동이 완료됩니다. 

---

작업에 맞는 RxJS 연산자 선택 

RxJS에는 약 100개의 RxJS Operator를 제공해 주고 있습니다.  

100개가 넘는 연산자들

RxJS의 공식문서(rxjs.dev)에 들어가서 각 연산자에 대한 세부 사항과 사용 예를 확인해 볼 수 있습니다. 

map에 대한 설명

RxJS 공부에 매우 도움이 되는 문서이니 처음 사용하는 오퍼레이터라면 공식문서를 체크해 보는 습관을 들이는 것이 좋습니다.  

고민될 때는 연산자 결정 트리를 사용해 보자

오퍼레이터가 이렇게 많다 보니 때론 어떤 오퍼레이터를 작업에 선택해야 하는지 고민이 되는 경우가 많은데요.

map 연산자를 추천해 주었다.

이때 RxJS 공식 문서에서 제공해주는 OPERATOR DECISION TREE를 이용할 수 있습니다. 몇 가지 질문 절차를 통해 작업 필요한 연산자를 고르는데 도움을 줍니다. 

https://rxjs.dev/operator-decision-tree

자동 번역을 사용한 모습

구글의 번역으로도 웬만큼 잘 걸러주니 한번 활용해 보세요. 

 

---

 

여기까지 수고하셨습니다. 다음 포스트부터는 rxjs 연산자 활용 시리즈입니다. 우선 map 연산자에 대해서 알아보도록 하겠습니다.