[React] MobX

 

저번 React Query에 이어서 Mobx를 가져와봤다. 솔직히 상태관리 도구 하나만 해도 써야할 얘기가 수두룩 빽빽한데 굳이 여러 개를 다 써두는 이유는, 다 써봐서 그렇다. 학원 수료하고 개발자가 커리어 시작하면 React할거라고 생각도 안했는데, 대뜸 첫회사에서 우리는 MSA로 React 개발한다. 이렇게 말을 할 줄은 나도 몰랐지. 거기다 하필 처음한 프로젝트가 Redux로 만들어진 Legacy 추가기능 개발, 그 다음 프로젝트가 React Query로 전환하는 첫 마루타일줄은 난 몰랐지.

그래서 진짜 초단기로 상태관리 툴 3개를 써버렸는데, 솔직히 하나만 주구장창 써온 나보다 더 경력 있으신 분들 생각하면 난 개똥이겠지만 그래도 괜찮다. 다양하게 얕게 아는거도 일단 당장 내가 할 수 있는 최선이라고 생각하기 때문임.

 

하여튼 각설하고, 오늘은 MobX인데, 이건 우리 회사에서 원래 주로 사용하던 상태관리도구였다. 우리 회사는 아무래도 Back-End를 위주로 굴러가는 Back-End 지향적인 회사다보니, 막 다채로운 프론트 스킬보다는 딱 정해진 라이브러리와 아키텍처로 빠르게 Back 구조 잘 따라가주면 되는 거라, 이 상황에 맞추려면 MobX가 가장 적합하지 않았나 싶다.

 

1. MobX 사용법

일단 기본적인 사용법을 알아보자. 

// 정말 예제로 간단하게만 쓰겠다.
import { makeAutoObservable, runInAction } from 'mobx';


class Store {
	
    state = [];
    
    constructor (state) {
    	this.state = state
        makeAutoObservable(this, {}, { autoBind: true })
    }

// action이 될 함수들 넣는 곳
async action () {
	// api..
    runInAction(() => {
    	
        }
    )
}
	

}
export default Store;

store는 대충 이렇게 구성한다. class로 구성을 하는데, state가 될 것 들을 전역변수로 선언, constructor를 통해서 초기화 까지 마치고 나서 이 store를 component에서 가져다쓰기만 하면 state를 사용할 수 있게 되는 것이다. 

그럼 store를 가져다 쓰는 Component를 살펴보도록 하자. 

import Store from './Store';


const Component = observer(({state})) => {
	
    return (
    	<div>state</div>
    )

}

귀찮아서 진짜 대충 써버렸는데 저렇게 observer를 통해 state를 감지하고 사용한다고 보면 된다. 

기본적인 사용법은 이렇다.

 

2. MobX 특징

1) 쉽다!

가장 기본적으로 많이 사용하는 Redux와 비교해서 생각해보면 함수형 프로그래밍의 영향을 많이 받은 Redux에 비해서 MobX는 객체지향적이다. 때문에 배우기도 쉽고 상태관리 라이브러리를 처음 사용한다고 해도 크게 어려움을 느끼지 않고 사용하게 된다.  또 Redux를 사용해본 사람들은 알겠지만, 보일러플레이트 코드 (설정을 위해 고정적으로 들어가야만 하는 코드) 가 상당히 많고 그래서 학습해야하는 기간이 필요한데다가, 비동기 처리하려고 하면 Redux-thunk, redux-saga 까지 써야하니까 아주 그냥 공부해야할게 한 두개가 아닌데, Mobx는 아주 간편하다. action도 비동기 처리해줄거 runInAction 해줄 함수 안에서 asyc하고 사용해주면 비동기 처리 뚝딱 가능하니까.  

 

2) observer

MobX의 가장 강력한 부분은 observer를 사용한 상태관리인데, Store에서 선언된 상태들을 Observer, Observable 이라는 설정을 붙여주는것 만으로 알아서 상태의 변경을 감지해준다는 점이라고 볼 수 있다. 

 

3) Action도 걍 Store에서

또한, Redux의 Store의 경우 Request를 통해 데이터를 받아온 뒤 그 데이터를 Subscribe 하는 컴포넌트에서 읽게 해주는 것 외엔 하는게 없다고 볼 수 있다. 즉, Read-Only 라는 말인데, 그 이유가 실질적으로 Dispatch는 Store랑 별개의 요소니까.. 라고 설명하면 될지 모르겠다. 할튼 근데 MobX는 Store에서 다한다. state가 있는 장소에 Action도 묶어서 만들어버리니까 코드 자체도 안복잡하고 한번에 같은 곳에서 확인이 가능하니까 편리하다.

 

4) class 문법

입문자가 쓰기 좋은 Store아닐까.. 한다. 그냥 학원에서 배운 객체지향만 잘 듣고와도 여기서 Store 만드는데 아무런 무리가 없다. 특히 요즘 프론트 코드는 함수형 프로그래밍이 진짜 많은데 학원수료하고 온 사람들은 그냥 정신 없을듯..

 

5) Domain Store

공식홈페이지에서 보면 알겠지만 되게 Domain Object를 활용해 Store를 구성할 수 있다. 이게 왜 장점이냐면 명확한 분리가 된다. 각 도메인에 속하는 내용들 (Action이든 State든 뭐든)은 다 동일한 Domain Object에 담아서 Store를 구성하고 다르면 그냥 분리해서 또 다른 Domain Object를 만들면 된다는거다. 이건 OOP의 형태를 쓰도록 해둔 Mobx에서나 되는게 맞다. 특수한 장점!

 

더 쓸게 많은데 내가 아직 공부가 덜 된거 같아서 나중에 이어붙일 예정이다.