Rx ) 마블 다이어그램?

안녕하세요 Axe입니다!

오늘은 마블 다이어그램에 대해서 알아보겠습니다.

 

'ReactiveX가 뭔지 압니까?' 글을 읽지 않고 오셨다면, 읽고 오시는 걸 추천해드립니다! :)

 

ReactiveX사이트의 메인화면을 보면 있는 이것!

Marble Diagram

바로 마블 다이어그램입니다!

 

마블이면... 마블 코믹스? 크흠...  (마블 코믹스의 마블은 MARVEL입니다...)

 

마블 다이어그램의 마블은 Marble입니다!

marble: 대리석, 구슬, 구슬치기

마블 다이어그램에서 마블은 구슬을 의미합니다.

다이어그램은 도표이죠? 그럼 말그대로 구슬 도표네요!...

위의 사진을 자세히 보면, 여러 색깔의 구슬들이 있는 것을 볼 수 있죠?

 

그런데 이게 도대체 뭐 하는 거냐고요?

 

먼저 ReactiveX사이트에 들어가서 맨 위에 있는 Docs에 Observable을 클릭해보면...

 

와! 한국어지원!

이렇게 Observable에 대한 설명이 나옵니다.

그리고 빨간색 밑줄이 있는 문장을 읽어보면, 마블 다이어그램이 무슨 역할을 하는지 알 수 있죠.

 

Observable과 Observable의 전환을 어떻게 표현하는지 보여준다는 말을 쉽게 설명하자면,

Observable에 어떠한 연산자(Operators)를 적용했을 때 생기는 변화를 도표로 표현한 것!

쉬운 설명이 아니였나요?...

만약 이해가 되지 않으셨다고 해도 괜찮습니다!

예제를 보면 확실히 이해가 될 겁니다.

 

예제를 보기 전에, 위 사진의 마블 다이어그램을 다시 한번 자세히 봐볼까요?

사진은 번역이 안됐길레 직접 했습니다 :)

이해하기 쉽도록 번역해 놨습니다.

한번 읽어 보시면 각각 무슨 의미기 있는 건지 알 수 있을 겁니다 :)

 

그럼, 예제를 봐볼까요?

 

가장 쉽다고 생각하는 'Just'연산자를 보면

이렇게 되어 있죠?

영어로 뭐라고 막 적혀있지만... 읽지 않으셔도 충분히! 이해할 수 있습니다.

마블 다이어그램만 보면 이 연산자가 어떠한 변환을 해주는지에 대한 것을 아주 쉽게 알 수 있습니다.

 

먼저 위에 빨간색 구슬이 있습니다.

이 빨간색 구슬을 'Just'연산자를 사용했을 때 나오는 결과가 빨간색 구슬이라는 건 보면 알 수 있죠?

즉, 어떠한 값에다가 Just연산자를 사용하면 그 값이 그대로 나온다는 것을 알 수 있습니다!

 

또 다른 예제를 하나 더 보겠습니다.

'filter'연산자네요!

흰 상자 안에 'filter(x => x > 10)'라고 적혀 있네요.

괄호 안에 있는 것이 조건이라고 하면... 10보다 큰 값이어야만 조건을 충족하겠네요?

 

위에 2, 30, 22, 5, 60, 1 이 담긴 구슬이 순서대로 있고

밑에는 30, 22, 60 이 담긴 구슬만이 순서대로 남아있네요!

그렇다면, filter의 조건을 충족하는 구슬만 결과로 나왔다는 걸 알 수 있겠죠?

즉, filter의 조건에 맞는 값만이 결과로 나올 수 있다는 것을 알 수 있습니다.

 

별로 어려울 거 없죠?

 

마블 다이어그램은 이게 끝입니다!

하지만, 그냥 도표를 사진으로만 본다면

복잡한 연산자를 보기에는 조금 어려울 수 있습니다.

 

그럴 경우에 도움이 될 수 있는 사이트가 바로

rxmarbles.com

RxMarbles: Interactive diagrams of Rx Observables

여깁니다! :0

 

각 연산자 마다, 구슬을 직접 움직여 보면서 더 편하고 쉽게 이해할 수 있습니다!

 

크게 어려운 내용은 아니었지만 도움이 되길 바라겠습니다!

 

---

 

끝까지 봐주셔서 감사합니다!

여러모로 부족한 부분이 많기에 혹시라도 잘못된 정보가 있다면 댓글로 알려주시면 감사하겠습니다!

 

RxSwift Book 저장소: https://github.com/devMinseok/RxSwift_Book

devMinseok/RxSwift_Book