MobX-시작하기

Javascript에서 react.js를 통해 어플리케이션을 만들 때 state관리를 단순화 시키기 위해 redux를 사용했었는데 최근 블로그와 Job description에서 MobX경험에 대한 글을 많이 보게되어 이번 솔로프로젝트에 도입해보려고한다.

 

기본적으로 MobX를 언급하기 앞서 기존에 사용했던 redux를 간단히 소개해보려고한다.

 

About Redux

 

위의 GIF는 redux의 데이터 흐름을 보여주는데 크게 Store, Action, Reducer로 분류를 하여 설명을 한다. 자세한 설명은공식문서(https://redux.js.org/introduction/three-principles)에 나와있으므로 생략하겠다. 이렇게 보면 단순해보이지만 실제로 redux를 사용하기 위해선 위에 언급한 store, action, reducer뿐만아니라 부수적으로 component와 props를 연결해주는 여러 코드들이 필요하기 때문에 코드가 복잡해 질 수 있는 가능성이 있다. 이를 위해 redux-toolkit이라는 라이브러리로 간단하게 지원을 하긴 하지만 toolkit을 편하게 사용하기 위해선 react-hooks또한 알아야하기 때문에 러닝커브가 있는 편이라고 볼 수 있다.

 

그럼 MobX는?

 

MobX는 한마디로 표현했을때 Java의 Spring Framework같다 라고 표현하고싶다. 또한 기존에 component와 props를 연결 시키는 과정을 Decorator(Java의 Annotation과 상당히 유사)을 가지고 해결하였다. MobX는 Store, Model Class, Repository Class로 구성이 되는데 비즈니스로직을 분리시킨 Java의 Spring처럼 모델이 로직을 가지고 있기에 컴포넌트의 코드가 훨씬 간결해진다.