[RxJS / angular] 8. take 연산자

rxjs의 연산자에 대해서 알아보고 있습니다. map, tap에 이어 자주 쓰는 연산자인 take에 대해 알아보겠습니다.

---

take 연산자란?

테이크 연산자는 지정된 개수의 항목만을 방출해주는 연산자입니다. take(2)라고 pipe에 사용하면 최대 두 개의 아이템을 방출하게 됩니다. 그리고 지정된 개수의 항목이 방출되면 take는 자동으로 완료됩니다. 따라서 무제한 방출하는 옵저버블을 제한할 때 take는 좋은 해결책이 됩니다.

위 예에서는 take 연산자를 사용하여 처음 두 항목인 1과 2가 배출되고 3은 생략됩니다.

 

아래 두 번째 예는 어떨까요??

 콘솔에 어떤값이 출력될지 예상이 가시나요?  아래가 콘솔 출력 화면입니다.

예상한 대로 출력이 되었나요? 처음 소스 옵저버블 of(1,2,3) 에서 1이 방출되고 tap연산자를 통해 콘솔에 1이 출력됩니다. map 연산자를 통해 1이 3으로 매핑됩니다. 이제 take연산자를 통과하게 되고 take에서 지정된 숫자는 2이고 아직 take에서 내부적으로 카운트된 숫자는 1이므로 숫자를 방출시킵니다. 이제 다음 map 연산자에서 item -1 이 되고 숫자 2가 방출됩니다. 방출된 숫자 2가 tap 연산자를 통해 콘솔에 출력됩니다.

다음으로 두 번째 소스 옵저버블 of(1,2,3)에서 2가 방출되고 tap연산자를 거쳐 2가 출력, map 거쳐 6이 방출됩니다. 다시 take는 지정된 숫자를 넘지 않았으므로 그대로 항목을 방출합니다. map을 거쳐 5가 되고 tap에서 5가 콘솔에 출력됩니다.  take 연산자에 2를 지정했고 이것이 두 번째 take 항목이기 때문에 더 이상의 항목은 배출되지 않습니다. 여기서 세 번째 방출 아이템인 3이 take 연산자의 전까지는 방출되는 것이 아니냐고 의문을 가질 수 있습니다. take로 지정된 숫자만큼 방출이 이뤄지면 take는 입력 옵저버블을 구독 취소(unsubscribe)해 버리고 완료(complete)되기 때문에 3이 방출되지 않습니다.

---

take 마블 다이어그램

아래 예를 마블 다이어그램으로 그려보겠습니다.

 

take 마블 다이어그램

마블 다이어그램 이제 어떻게 읽는지 알고 계시죠? 선은 옵저버블, 구슬은 방출되는 아이템을 의미합니다. 따라서 첫번째 선은 소스 옵저버블인 of, 두번째 선은 map에서 방출하는 옵저버블, 세번째 선은 take에서 만들어내는 옵저버블 입니다. 각각 만드는 옵저버블은 다음 연산자의 입력 옵저버블이 됩니다. 그리고 소스 옵저버블 of(1, 2, 3)을 구독하게 되면 연산자는 자동으로 입력 옵저버블을 구독하게 됩니다. take연산자에게 2를 전달했기 때문에 두 번째 항목을 방출하면 옵서버를을 완료하고 입력 옵저버블을 구독취소(unsubscribe)합니다. 이것으로 소스 옵저버블로의 체인을 구독해제하고 더 이상 항목은 방출하지 않게 됩니다.

---

take 연산자 정리

공식적으로 take는 필터링 연산자입니다. take는 옵저버블을 입력으로 하고 그것을 구독하므로 옵저버블 출력을 만듭니다. 입력된 옵저버블에서 항목이 배출되면 take는 해당 항목을 카운트합니다. 카운트가 지정된 수보다 작거나 같으면 항목을 옵저버블 출력으로 내보냅니다. 지정된 숫자와 같으면 입력된 옵저버블에서 구독을 취소하고 옵저버블을 complete합니다. 그래서 take는 정의된 수의 항목만 방출하게 되고 소스 옵저버블에서 나머지 항목은 방출되지 않습니다.

---

 

여기까지 수고하셨습니다. 이제 다음 포스트부터는 실제로 코딩에서 사용되는 케이스로 rxjs를 다뤄보도록 하겠습니다.