[RxJS / angular] 23. mergeMap (옵저버블 매핑 + merge )

옵저버블은 옵저버블을 방출할 수 있습니다. 그때 사용하는 연산자가 고차 매핑 연산자입니다. concatMap에 이이서 mergeMap에 대해 알아보도록 하겠습니다.

---

mergeMap 이란

mergeMap은 고차 매핑과 함께 병합(merge)기능을 하는 연산자입니다. concatMap과 마찬가지로 mergeMap 연산자는 방출된 각 항목을 우리가 제공하는 함수에 정의한 대로 새로운 내부 옵저버블 항목으로 변환합니다. mergeMap의 주요한 특징은 내부 옵저버블 항목을 병렬로 실행하고 결과를 병합한다는 점입니다.

 

아래 예제에서는 외부 옵저버블을 생성하기 위해 of 생성자 함수를 사용하고 있습니다. 내부 옵저버블은 http.get 호출로 리턴되는 옵저버블입니다. 옵저버블을 방출하는 옵저버블입니다.

파이프 처리에서 mergeMap 연산자를 통해 각 문자열을 ID로 사용해 http.get 통신의 url로 데이터를 검색하게 됩니다. http.get의 내부 옵저버블은 구독하지 않는데 어떻게 데이터를 방출하냐고요? 그 이유는 내부 옵저버블을 mergeMap에서 자동으로 구독해 주기 때문입니다. 내부 옵저버블을 자동 구독하기 위해서도 mergeMap과 같은 고차 매핑 연산자를 사용해야 합니다.

---

mergeMap 마블 다이어그램으로 이해하기

이제 데이터가 방출되고 처리되는 순서를 마블 다이어그램을 통해 알아보겠습니다.

mergeMap은 입력 옵저버블을 구독하고 다시 새로운 출력 옵저버블을 생성합니다. 위 마블 다이어그램에서 첫 번째 선이 입력 옵저버블, 두 번째 선이 출력 옵저버블입니다.

이제 입력 옵저버블에서 첫 번째 항목 id1을 방출합니다.

입력 옵저버블의 항목이 방출되면 즉시 처리 되는데요. 매핑 함수가 실행되어 새로운 내부 옵저버블 항목을 생성합니다. 그런 다음 해당 옵저버블 항목을 구독하고 내보낸 문자열을 사용해 get요청이 발행됩니다. 아직 response는 도착 안 했다고 가정해 보겠습니다.

 

다음 항목인 id2가 방출되면 동일한 단계에 따라 즉시 처리됩니다.

id2에 의한 get response가 반환되면 내부 옵저버블에서 방출된 데이터가 출력 옵저버블에 병합(merge)됩니다. 내부 옵저버블은 병렬로 실행되기 때문에 특별한 순서 없이 출력 옵저버블에 병합됩니다.

 

이제 막 기다리던 첫 번째 get에 대한 응답이 왔습니다.

다시 출력 옵저버블에 데이터가 병합됩니다. 그리고 모든 옵저버블이 complete 되었습니다.

---

mergeMap 처리 쉽게 기억하기

mergeMap의 작동 방식이 쉽게 기억하기 위해 mergeMap을 800미터 경주라고 생각해 보겠습니다. 각 주자들은 내부 옵저버블입니다. 주자는 동시에 출발합니다. 대부분 주자들은 더 나은 성적을 위해 트랙 안쪽을 달리게 됩니다. 따라서 대부분 마지막에는 하나의 트랙으로 합쳐져서 결승선을 통과하게 됩니다. 병렬로 처리되는 옵저버블의 방출이 하나의 스트림으로 합쳐지는 것을 연상 지어 생각해보시고 기억에 도움이 되시길..

---

mergeMap 정리

공식적으로 mergeMap은 변환 연산자(transformation operator)입니다. mergeMap 연산자는 입력 옵저버블을 구독하고 출력 옵저버블 항목을 생성합니다. 각 항목이 입력 옵저버블에서 내보내지면 mergeMap에 제공한 함수에서 지정한대로 새로운 내부 옵저버블에 매핑 됩니다. mergeMap은 다시 이 내부 옵저버블을 구독합니다. 마지막으로 내부 옵저버블이 방출한 항목이 출력 옵저버블에 병합됩니다.

순서가 중요하지 않고 고차 옵저버블 매핑이 필요한 경우 mergeMap을 사용하여 병렬로 처리하면 편리합니다. 예를 들어 여러 데이터를 동시에 검색하고 출력하는 순서가 중요하지 않은 경우 mergeMap을 사용할 수 있습니다.

---

여기까지 수고하셨습니다~