React State 관리 도구 - Redux vs Mobx

React를 처음 배우기 시작할때는 React의 State 관리 도구가 Redux뿐인줄 알고 있었습니다. 그래서 reducer와 action 정의 등 번거로운 redux가 당연한 줄 알고 사용하고 있었습니다. 하지만 mobx라는 다른 state 관리 도구가 있다는 사실을 알게되었고 이 역시 사용해보면서 두 도구의 장단점과 써보면서 느낀점들을 정리해보고자 합니다.

■ Redux

redux의 컨셉은 flux로부터 시작되었습니다. 기존에 UI와 데이터를 관리하기 위해 많이 사용됐던 MVC 패턴은 View와 모델이 많아질수록 구조와 데이터의 흐름이 복잡해져서 추적하기가 어려워진다는 문제점이 있었습니다. 이러한 문제를 해결하기 위해 페이스북에서 Flux 아키텍처를 고안하였습니다.

MVC의 데이터흐름

Flux의 구조는 아래 그림과 같습니다. Store에서 저장하는 데이터를 Action을 발생시켜 Dispatcher가 수정하고 이를 View에 적용되는 것이 큰 흐름이라고 볼 수 있습니다. MVC에서 Model 역할을 하는 Store를 하나만 두어 데이터의 흐름과 관리를 한눈에 한곳에서 관리할 수 있다는 것이 특징이라고 볼 수 있습니다.

Flux의 데이터 흐름

데이터의 흐름이 한눈에 보이고 데이터를 한곳에서 관리할 수 있다는 것의 가장 큰 장점은 데이터의 흐름이 한눈에 보이고 디버깅이 용이하다는 것 입니다. 저는 개인적으로 이 Flux의 Store를 백엔드의 데이터베이스와 비슷하다고 생각하고 있습니다. 이러한 Flux 아키텍처를 라이브러리로 구현한것이 Redux이며 사실상 React 프로그래밍의 기준이되어 React + Redux는 가장 기본적인 조합으로 사용되고 있습니다.

Redux 예제

redux의 사용방법을 소개해 드리기 위해 간단한 예제를 소개해드리려고 합니다. 아래 예제는 버튼을 눌러 숫자를 증가, 감소 시키는 Counter 예제 입니다.

1. Reducer 정의

action의 type을 기준으로 action을 분류하고 action에 따라 state를 변경한다.

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return {...state}
  }
}
 

2. Action dispatch

<Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />

3. Action 사용

import React, { Component } from 'react'
import PropTypes from 'prop-types'
 
class Counter extends Component {
 
  render() {
    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Clicked: {value} times
        <button onClick={onIncrement}> + </button>
        <button onClick={onDecrement}> - </button>
      </p>
    )
  }
}
 
Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncrement: PropTypes.func.isRequired,
  onDecrement: PropTypes.func.isRequired
}
 
export default Counter
 

■ Mobx

아래 그림은 Mobx의 데이터 흐름입니다. Redux와 비슷하게 보이지만 조금씩 다른 것을 알 수 있습니다. Mobx와 Redux의 가장 큰 차이점은 store라고 할 수 있습니다. Redux의 단일 store원칙과는 다르게 Mobx는 Store의 개수에 제한이 없습니다. 따라서 기능별로, 로직별로 원하는대로 store를 분리하여 깔끔하게 비즈니스로직을 작성할 수 있습니다.

Mobx의 데이터 흐름

따라서 단일 redux에서 store object로인해 나타나는 immutable 이슈는 mobX에서 찾아볼 수 없습니다. 또한 redux에서 해줘야했던 action 선언, connect, mapStateToProps, mapDispatchToProps등 번거로운 작업들은 데코레이터로 간단하게 대체됩니다.

Mobx Store 예제

1. Mobx store 정의

counter라는 state를 증가시키고 감소시키는 CounterStore를 정의

import {observable} from 'mobx';
 
class CounterStore {
  @observable counter = 0;
 
  increment() { this.counter++; }
 
  decrement() { this.counter--; }
}
 
export default new CounterStore();

■ Redux vs MobX

Mobx와 Redux의 차이는 코드적인 부분에 있어서 가장 차이가 크다고 생각합니다. Redux는 State를 사용하기 위해 mapStateToProps, mapDispatchToProps, bindActionCreators등 Component와 state를 연결해주는 번잡하고 '굳이 이렇게까지 헤야하나' 싶은 작업들을 해야만 했습니다. 하지만 Mobx는 Redux의 번거로운 작업들을 데코레이터로 매우 단순화 시켜주고 가독성이 매우 확실해지는 경험할 수있습니다.

Redux는 모든 State를 하나의 객체(store)로 관리하기 때문에 React의 불변성을 유지하기 위해서 많은 노력이 필요합니다. state 객체의 depth가 깊어질수록 매우 번거로워지고 관리하기가 어렵습니다. 이를 해결하기 위해 immutable.js, immutableHelper 등을 사용할 수 있지만 이 역시도 매우 번거롭다는점에 모든 개발자분들이 동의할것이라 생각합니다.

개인적으로 Mobx를 더 좋아하기 때문에 Mobx에게 편파적으로 글을 작성한것 같다는걸 깨닳았습니다. 그래서 개인적인 의견을 잠시 내려두고 Redux와 Mobx 각각의 장점을 정리해보았습니다.

Redux	Mobx
사용하는 개발자들, 회사들이 많음	처리속도가 빠름
개발도구, 라이브러리가 더 많음	유연함
magic, 문법적 설탕이 적음	코드가 적음, 러닝커브가 낮음

■ 마치며

최근 최신기술, 다른사람들이 많이 쓰는 기술이면 생각없이 따라서 사용했던 스스로를 되돌아보게 되었습니다. 그동안 어떤 기술, 라이브러리를 사용할때 그것을 왜 사용해야 하는가, 다른 좋은 대안은 없는가에 대해 집중적으로 공부하려고 합니다. 미흡하게나마 Redux와 Mobx 두 기술을 결정하는대에 있어서 이 글이 도움이 되었으면 좋겠습니다.

참고자료

Redux Example : https://redux.js.org/introduction/examples

Mobx Example : https://gist.github.com/mastermoo/740f5e83c60f32ea366595ec0a88ecdc

https://www.slideshare.net/darko3/making-react-part-of-something-greater

http://woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.html

https://rokt33r.github.io/devnotes/2018/03/04/why-i-replace-redux-with-mobx/

https://mobx.js.org/

https://redux.js.org/basics/usage-with-react