[RxJS / angular] 6. map 연산자, 마블 다이어그램 읽는 법

RxJS에서 가장 일반적으로 많이 사용되는 연산자 중 하나임 map연산자에 대해 알아보고, 마블 다이어그램을 어떻게 읽어야 하는지 알아보도록 하겠습니다.

---

map 연산자란?

map 연산자는 옵저버블에 의해 방출된 항목을 제공하는 함수에 정의된 대로 값을 변환하거나 변경합니다. 아래 예를 살펴보겠습니다.

map을 사용해서 방출된 각 항목의 두배로 한 값을 매핑해 줍니다. map은 방출된 항목의 수를 변경할 수 없습니다. map연산자로 방출된 항목에 대해 정확히 하나의 매핑된 항목이 방출됩니다. 예를 들어 10개의 방출되는 항목이 있다면 map을 사용하여 방출된 각 항목을 변경한 후 각각의 항목이 10번 방출됩니다.

위에 of를 사용하여 옵저버블을 만들었습니다. 이 옵저버블은 1, 2, 3이라는 숫자가 차례로 방출되는 옵저버블입니다. pipe안에 map연사자를 사용하고 있고 변환하는 화살표 함수를 map의 인수로 넘겨주고 있습니다. map에 지정해준 함수는 각 숫자에 2를 곱한 값을 리턴해줍니다. 처음에 숫자 2가 방출되고 맵 연산자를 통해 4로 변환되어 방출됩니다. 2가 방출되고 4로 변환 후 방출됩니다. 3이 방출되고 6으로 변환되고 방출됩니다.

---

마블 다이어그램 이해하기

RxJS 연산자는 마블 다이어그램으로 나타낼 수 있습니다. 옵저버블의 정의가 뭐였는지 생각나시나요? 옵저버블은 시간의 경과에 따른 이벤트 혹은 값의 모음입니다. 이러한 방출되는 시간의 특성을 표현하기 위해서 화살표를 사용하여 왼쪽에서 오른쪽으로 이동하는 시간의 흐름을 나타냅니다.

위 그림을 보면 화살표를 하나 그렸고, 그 아래 map을 넣었습니다. 그리고 다시 map연산자 아래 화살표를 그렸습니다. 이제 화살표를 시간의 흐름에 따라 방출되는 옵저버블이라고 생각해보세요. 이제 두 개의 옵저버블 사이에 하나의 map연산자가 있다고 생각할 수 있겠군요. 마블 다이어그램의 첫 번째 줄은 소스 옵저버블을 나타냅니다. 우리 예의 경우는 of에서 생성되는 옵저버블 이겠네요. 그리고 3개의 숫자가 방출되는 옵저버블입니다.

생성 함수 of를 사용하여 옵저버블을 정의했기 때문이 값이 방출된 후 자동으로 완료되어 complete 알림을 내보냅니다. Complete 알림은 마블 다이어그램에서 수직선으로 표시합니다. 마블 다이어그램과 함께 방출되는 과정을 자세히 살펴보겠습니다.

소스 옵저버블을 subscribe 메소드로 구독하면 자동으로 연산자가 입력 옵저버블을 구독하게 됩니다. 두 번째 줄은 연산자가 생성한 출력 옵저버블을 나타냅니다. 참고로 방출된 각 항목이 마블(구슬)로 표시되어 있으므로 마블 다이어그램이라고 불립니다. 

입력 옵저버블은 1를 방출하고 맵은 2로 변환한 다음 출력 옵저버블을 방츨 합니다. 옵저버블의 최종 출력은 제공된 옵저버에게 내보내는 결과이며 예의 경우 콘솔에 출력하게 됩니다. 다음 방출 값도 같은 과정을 거치게 되고 결과적으로 마블 다이어그램은 아래와 같이 그려집니다.

완선된 마블 다이어그램

생성 함수를 사용했기 때문에 숫자가 모두 방출되면 옵저버블은 완료됩니다. 마블 다이어그램의 아주 간단한 예였습니다. 

 

한 개 더 연습해 보겠습니다. 우선 소스코드를 살펴봅시다.

위와 같이 두 개의 map연산자를 사용한 경우의 마블 다이어그램은 어떻게 그려질까요? 연산자가 여개가 있더라도 마블 다이어그램의 생각하는 방식은 똑같습니다. 

연산자가 하나 더 늘어남에 따라서 화살표도 하나 더 그려주고 각 방출 값을 마블로 그려주면 됩니다. rxjs의 공식 문서의 연산자에는 마블 다이어그램도 항상 표기되어 있으니 이제 자연스럽게 읽어주시면 됩니다. 

---

map은 언제 사용해야 될까?

map은 공식적으로는 변환 연산자입니다. 맵 연산자는 입력 옵저버블을 구독하고 출력 옵저버블을 생성합니다. 항목이 옵저버블에서 방출되면 map의 인수에 지정된 함수대로 변환됩니다. map에 변환된 항목은 다시 옵저버블로 방출되어집니다. 따라서 방출되는 각 항목을 변경해야 할 때 map을 사용하시면 됩니다. 

 

---

여기까지 수고하셨습니다. 마블 다이어그램은 저도 처음엔 무슨 그림인가 싶었는데 한번 이해하고 나니 매우 이해하기 편했습니다. 다음 포스트는 tap 연산자입니다. 👏