[RxJS / angular] 14. combineLatest 생성 함수

CombineLatest 생성 함수 란?

combineLatest는 파이프 연산자가 아닌 정적 생성함수입니다. combineLatest는 각 입력 옵저버블의 마지막에 방출된 값을 사용하여 값을 방출하는 하나의 옵저버블을 생성합니다.

위 예 에서는 3개의 입력 옵저버블 a$, b$, c$ 배열로 받는 combineLatest 생성 함수를 사용해서 하나의 옵저버블로 만들고 있습니다. 각 입력 옵저버블이 방출될 때마다 각 옵저버블의 최신 값이 배열로 결합되어 하나의 출력 옵저버블로 방출됩니다.

---

combineLatest 마블 다이어그램

입력 옵저버블 a$, b$, c$로 combineLatest를 사용해서 출력 옵저버블을 만들고 있습니다.

입력 옵저버블중 하나가 새 값을 방출할 때마다 출력 옵저버블에서 값이 방출됩니다.  출력 옵저버블의 첫 번째 방출 값은 [2,A,a]입니다. 방출된 데이터의 모양을 주목해 보면 배열의 요소 순서대로 각 옵저버블의 마지막 방출 값을 포함하고 있습니다. 3개의 입력 옵저버블이 있었으므로 결과 배열은 3개의 요소를 가지게 됩니다. c$ 에서 b를 방출하면 combineLatest는 각 옵저버블 항목에서 최신 값인 [2, A, b]를 가져오게 됩니다. 여기서 b$ 옵저버블에서 C를 방출하면 마블 다이어그램은 아래와 같이 표현할 수 있습니다.

b$에서 C가 방출되면, 그 시점에 2, C, b 값이 각 옵저버블의 가장 최근에 방출한 값입니다. 따라서 출력 옵저버블은 [2,C,b]를 방출하게 됩니다.

출력 옵저버블의 방출 값이 몇 개 누락된 걸로 보이시나요? 누락된 것이 아닙니다. combineLatest는 모든 옵저버블이 적어도 하나의 값을 방출할 때까지 아무것도 방출하지 않기 때문입니다. 이 특성은 일부 방출된 항목이 출력 옵저버블에서 누락될 수 있음을 의미합니다. 예를 들어 a$ 옵저버블에서 방출된 값 1은 출력 옵저버블에서 얻을 수 없는 값이 되어버립니다.

---

combineLatest 정리

공식적으로 combineLatest는 조합 생성 함수(combination function) 입니다. 옵저버블 세트를 입력으로 받아 각각 구독하고 옵저버블 출력을 생성합니다. 값이 옵저버블에서 방출될 때 모든 입력 옵저버블의 값이 한 번 이상 방출된 경우 출력 옵저버블은 값을 방출합니다. 출력 옵저버블로 방출된 값은 각 입력 옵저버블에서 가장 최근에 방출된 값을 배열로 결합한 값입니다. 모든 입력 옵저버블이 complete되면 출력 옵저버블도 complete됩니다.

combineLatest는 데이터 스트림을 결합할 때 사용합니다. 한 번에 여러 데이터 스트림을 필요로 할 때 사용됩니다. 데이터 스트림 사이의 관계를 묶어줄 수 있는데요. 예를 들어 http 통신으로 오는 데이터 스트림과 사용자의 필터 선택 액션 스트림과 결합해 데이터와 필터 선택 값을 포함된 스트림을 얻을 수 있습니다. 그 후에 결과를 매핑하여 액션 스트림이 방출될 때마다 상태를 재 평가하고 데이터를 필터링하는데 활용할 수 있습니다.

---

여기까지 수고하셨습니다. 다음 포스트에서는 forkJoin에 대해 알아보도록 하겠습니다.