[RxJS / angular] 13. 옵저버블 데이터 스트림 결합, 결합 연산자 유형

여러 데이터를 반응적으로 사용하는 방법 중 하나는 다수의 옵저버블의 방출 항목을 결합해 하나의 방출 세트로 결합하는 것입니다. 이번 포스트에서는 옵저버블의 스트림을 결합하는 방법에 대해 알아보도록 하겠습니다.

---

스트림을 결합하는 이유

데이터 스트림을 결합을 통해 여러가지 편리한 작업을 할 수 있습니다.

첫 번째로 스트림 결합을 통해 연관 있는 두 데이터를 매핑해 줄 수 있습니다. 예를 들어 ID값을 특정 문자열과 매핑하려면 ID 정보가 있는 데이터 스트림과 특정 문자열 정보가 있는 데이터 스트림을 병합해서 ID에 해당하는 문자열을 매핑할 수 있습니다.

두 번째로 스트림을 결합해서 여러 데이터 소스를 통해 보다 유용하고 포괄적인 정보를 하나의 스트림으로 제공할 수 있습니다. 예를 들어 "제품" 데이터 스트림과 "공급업체" 데이터 스트림을 결합하여 제품별로 제품에서 사용 가능한 공급업체를 표시하게 하는 스트림을 만들 수 있습니다.

세 번째로 결합을 통해 더욱 리액티브 하게 화면을 만들 수 있습니다. 화면의 인터렉션으로 발생하는 스트림과 데이터 스트림을 결합해서 특정 작업을 수행하는 파이프라인을 실행하게 해 리액티브한 경험을 줄 수 있습니다. 예를 들어 사용자가 필터를 변경할 때마다 제품 목록을 다시 필터링하게 할 수 있습니다.

마지막으로 템플릿에 필요한 스트림을 병합하여 템플릿 코드를 단순하게 유지할 수 있습니다.

---

결합 연산자와 함수

RxJS의 결합 연산자와 생성 함수에는 여러 유형이 있습니다.

1. 단일 옵저버블로 결합 유형(merge, concat)

여러 옵저버블에서 방출된 항목들을 단일 옵저버블로 결합하는 유형이 있습니다. 위 마블 다이어그램을 보면 방출된 문자와 방출된 숫자는 하나의 문자 및 숫자 세트로 결합되었습니다. merge와 concat이 이러한 유형의 예입니다. 이 유형은 데이터가 균일할 때 자주 사용됩니다.

2. 고차 옵저버블 평탄화 유형(mergeAll)

또 다른 유형은 배열과 같은 복잡한 방출을 단순화하여 값을 새로운 옵저버블로 평탄화 하는 것입니다. 위 마블 다이어그램에서 옵저버블 소스에서 방출된 배열이 평탄화되어 배열이 개별 요소로 바뀌고 있습니다. 이러한 개별 요소는 옵저버블의 단일 요소로 방출됩니다. mergeAll 연산자가 이러한 유형의 예입니다.

3. 결합된 값 방출 유형(combineLatest, forkJoin, withLatestFrom)

마지막 유형은 여러 옵저버블의 값을 결합하여 결합된 값의 배열을 단일 결과 옵저버블로 내보내는 유형입니다. A와 1이 방출되면 A와 1을 포함하는 배열이 방출됩니다. combineLatest, forkJoin, withLatestFrom이 이러한 유형의 예입니다.

---

다음 포스트에서는 가장 많이 사용되는 결합된 값을 방출하는 유형인 combineLatest, forkJoin, withLatestFrom에 대해 우선 다뤄보도록 하겠습니다.