⚛️React hooks + MobX 사용해보기 (1)

최근 리액트를 쓰지 않는 회사에 취직하게 되면서 사용하지 못했던 리액트 공부를 다시 시작했다.

막 공부할때는 Redux를 막 배우고 있었는데, Firebase와 연동할 때 ReduxFirebase라는 모듈을 제대로 사용하지 못해 반포기상태였다.

그러다 MobX라는 상태관리 라이브러리를 접하게 되었는데,

사용은 간단하지만 React hooks에 최신화 된 정보가 없어서 기록해 놔야겠다 생각했다.

 

---

🛠️ 사용한 환경

• React 16.4.0
• Type Script 4.6.3
• mobx 6.5.0
• mobx-react 7.3.0

 

❗ 주의

처음 CRA로 프로젝트를 시작했을 때, React 버전이 18.0.0 이라면 mobx를 지원하지 않을 수 있다.
이럴땐 yarn add 를 통해 설치 해 주거나, React 버전을 낮추자.

 

---

 

0. CRA 및 모듈 다운로드

npx create-react-app {프로젝트명} --template typescript
npm i mobx mobx-react

아주 간단한 counter만 구현할 것 이므로, 다른 모듈들은 설치하지 않았다.
특이한 점이 있다면 MobX와 Typs Script와 호환이 잘 되어서 인지

npm i @types/mobx

따로 @type을 설치 할 필요가 없었다.

 

 

---

1. MobX Store 생성하기

 

src--
    App.tsx
    index.tsx
    store--
        counter.tsx
        useStore.tsx

우선 프로젝트 폴더는 이렇게 만들었다.
아주 간단한 프로젝트라, 따로 컴포넌트 폴더도 만들지 않았다.

 

이제 counter.tsx 를 작성 해 보자.

 

📁src/store/counter.tsx

 1. mobx import 및 interface 작성

import { observable } from 'mobx';

interface ICounter {
  num: number;
  increase: () => void;
    decrease: () => void;
}

... // 아래 코드와 연결됩니다.

기존 mobx에서는 action, compute 등 다양한 데코레이터를 사용했지만
hooks로 넘어오면서 간결해졌는지, 아니면 예제가 간단해서인지 observable 하나만 import하면 된다.
그리고 interface는 MobX로 관리할 store의 타입이다.
이번에는 심플하게 숫자 변수와 증/감 메서드만 다룰 계획이므로 3개만 구성해준다.

 

  2. Store 만들기

export const counter = observable<ICounter>({

  num: 0, // , 로 구분해 주자.

  increase () {
      this.num++
  },

    decrease () {
      this.num--
    }
})

처음엔 함수 형태인줄 알아서 ,(콤마) 때문에 살짝 헤맸었다.
그러나 observable로 감싸 준 내부는 Class 형태라는 걸 기억해주자.
덕분에(?) 변수 선언이 아니라는 점과 메서드에서 내부 num에 접근할 때 this. 로 접근해 주는걸 기억하자.
(저도 객체 형태에는 익숙치 않아서, 정확한 설명이 어려운 점 죄송합니다.)

 

📁src/store/useStore.tsx

  3. useStore로 사용할 준비하기

import { counter } from './counter';

const useStore = () => ({ counter });
export default useStore;

이제 useStore 라는 파일에서 사용 할 모든 store들을 모아서 내보내주면 준비 완료다.
관리할 store가 간략한 현재 프로젝트는 사실 이렇게 분리 할 필요는 없지만,
보통 여러 store나 상태를 관리할 때는 이런식으로 역할을 분리하여 사용하는 것 같으니, 이대로 따라주도록 하자.

 

 

---

2. App에서 사용하기

 

📁src/App.tsx

import useStore from './store/useStore'; // 1
import { observer } from "mobx-react"; // 2

function App() {

  const { counter } = useStore(); // 1


  return (
    <div className="App">
      {counter.num}
      <button onClick={() => counter.increase()}> ++ </button>
      <button onClick={() => counter.decrease()}> -- </button>
    </div>
  );
}
export default observer(App); // 2

이렇게만 적으면 바로 전역적으로 상태관리가 가능하다. Redux에 비해 설정 할 내용이 정말 줄은 것 같다.
그래도 몇 가지 시행착오가 있어서, 따로 숫자로 기록 해 놨다.

 

  1. useStore는 useStore.tsx 에서 가져와서 사용해주자.

아까 useStore.tsx에서 만든 메서드를 그대로 import 해 와서,
구조분해로 인스턴스를 만들어서 사용 해 주면 된다.
메서드나 변수에 접근할 때 counter.num 이런식으로 접근하는 것만 잊지말자 :)

 

  2.꼭 observer를 사용하자.

처음에 본 블로그 글에선 이 부분이 되어 있지 않았는데, 덕분에 많은 시간 헤맸다...ㅎ
나중에 찾아보니 observer를 사용해 줘야 한다고 나왔는데, 이를 사용하지 않으면

console로 표시되는 num 자체는 변경이 되나, 화면에 표시되는 값이 변하질 않는다.

꼭 작성해주길... 😭

 

---

 

끝으로

처음엔 솔직히 최신, 그리고 hooks에서 사용하는 정보가 많지 않아서 꽤 어렵게 느껴졌다.
(검색을 잘 못해서, 공식문서나 다른 예제를 찾기 힘들었다.)

근데 다 사용하고 보니 사용하는 방식 자체도 너무 간결하고, Redux 비교했을 때, index.js에서 store 설정이 따로 필요없는 등 아주 편리한 사용성을 보여줬다.

아직 연습단계라서 실제 좀 더 큰 프로젝트를 만든다면 어떻게 될 지 모르겠지만, 지금까진 아주 만족스럽다

그 외에 메서드들은 아직 쓰이는지, 프로젝트 규모가 더 확장된다면 어떤 문제가 생길지는 잘 모르지만, 완성된 counter를 보면 아주아주 간단해보여서 만족스럽다.😄

아무튼 다음은 Todo를 만들면서 예제를 작성해보자!