mobx

앞서 언급한 대로 Mobx는 Redux와 비슷한 종류의 State관리 라이브러리입니다. 위 언급한 Redux와는 다르게 너무나도 간결하고 깔끔한 구조를 가지고 있습니다.

Mobx의 기본개념 및 특징

Mobx의 State(데이터)의 흐름과 핵심 개념을 간단하게 표현 해보았습니다. 사실 더 자세한 개념은 공식문서에 있지만 이해하는 데 방해가되는 개념은 제외하고 제가 이해한 부분을 간략하게 그려보았습니다. 배달 리스트를 가져오기 위해서 DeliveryStore(Spring의 서비스의 역할과 거의 비슷하다)의 findAllDeliveries를 호출하여 서버로 부터 가져온 데이터를 선언해둔 deliveries state에 할당 해주면 DeliveryComponent에서 deliveries 를 Rendering 하게 되는데 이것이 기본 동작 개념입니다. 기타 Mobx Store와 React 컴포넌트를 연결하는 방법은 Redux와 달리 @inject 데코레이더 한줄로 이루어 집니다. 물론 그외 여러가지 기능을 하는 데코레이더 들이 제공되고 있으며 설명은 이후 자세히 하겠습니다.

그림 2. mobx 데이터 흐름

Mobx의 아키텍쳐

Mobx는 렌더링 할 State를 관찰대상으로 지정, State를 변경하면 React Component Render 메소드에 의해서 Rerendering 되는 아키텍쳐를 기본 골격으로 합니다. 예제와 함께 Mobx의 작동 방식과 특징을 알아 보겠습니다. 마치 Java Spring Framework유사한 Layer 아키텍쳐를 가지고 있고 실제로 그런식으로 Layer를 분리하여 아키텍쳐를 구성하는 것을 권장하고 있습니다.