mobx 사용하기

mobx는 react의 상태 관리 라이브러리 입니다. class 형태로 작성하여 프로퍼티, 메서드 형태로 상태를 관리 합니다.

mobx 사용하기

 

목차

 

1. mobx란?

2. 장점

3. 단점

4. 사용법

5. 구현된 코드로 보기

 

1. mobx란?

• react 내에서 전역 상태 관리를 할 때에 사용하는 라이브러리
• class로 만들어서 사용
• 관리하는 상태 값은 클래스의 프로퍼티로, 상태를 변경하는 함수는 클래스의 메서드로 생성

2. 장점

• 코드량이 적음(boilerlplate가 적음)
  • redux는 action, reducer, store 등 작성해야하는 코드가 많음
  • mobx는 class를 만들어 프로퍼티와 메서드를 생성해주면 됨

 

• 비동기 처리 간편
  • 생성한 메서드에 async/await 키워드를 사용하면 됨

3. 단점

• redux와 비교해 점유율이 낮은 편
  • 관련 자료를 찾을 경우 redux가 찾기가 편할 수 있으며, 레거시 코드들의 경우 redux를 사용했을 경우가 많음

 

압도적인 redux의 점유율

 

4. 사용법

• mobx 설치

npm install --save mobx mobx-react-lite

• store 생성

//store/counterStore.js

import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

export default new CounterStore();

• observer를 통해 상태를 감지, 변경

import { observer } from "mobx-react-lite";
import counterStore from "./store/counterStore";
import "./App.css";
import Test from "./Test";

const App = observer(() => {   // observer로 사용.
  const handleIncrease = () => {
    counterStore.increment();   // class에서 지정한 메서드로 상태 변경
  };

  const handleDecrease = () => {
    counterStore.decrement();   
  };

  return (
    <div>
      <button onClick={handleDecrease}>-</button>
      <span>{counterStore.count}</span>   // class의 프로퍼티로 상태 불러오기
      <button onClick={handleIncrease}>+</button>

      <Test></Test>
    </div>
  );
});

export default App;

(사진) 카운터로 구현한 예시

5. 구현된 코드로 보기