React에 Mobx 얹어서 로그인 구현해보기

아무래도 아직까지는 Mobx보다 Redux를 사용하는 사람들이 많아서 Mobx에 관한 자료가 적습니다.
게다가 Mobx가 자유도가 높은 것인지 정형화 된 패턴이 보이지 않기도 하고, 리액트 Hook이 나오면서 클래스형 컴포넌트를 사용할 때와 Hook을 사용할 때 Store를 바인딩 하는 방법에 살짝 차이도 있어서, 검색을 하다가 오래 헤맸습니다.
그래서 제가 적용한 방법을 남겨봅니다.
사용 방식에도 클래스를 이용하는 방식과 Hooks를 사용하는 방식이 있는데, 개인적으로는 클래스를 사용하는게 훨씬 이해하기 쉬워서 클래스 방식을 사용중입니다.

Mobx를 활용하여 로그인 기능을 구현해보겠습니다.

먼저, 스토어를 생성해보겠습니다.

src/store/authStore.ts

import { observable, action, computed } from "mobx";
import loginApi from "@/Views/Auth/api/authApi";
import { AuthData } from "@/common/interface/auth";

class AuthStore {

  @observable userData: authInfo | null = null;

  @computed get isLogged() {
    this.userData = JSON.parse(<string>localStorage.getItem('authInfo'));
    return !!this.userData;
  }

  @computed get getAccessToken() {
    return this.userData!.token;
  }

  @action
  async login(authData: AuthData) {
    let result = await loginApi.login(authData);
    localStorage.setItem('authInfo',JSON.stringify(authInfo.data.authInfo));
    return result;
  }
  
}

export default AuthStore;

interface authInfo {
  tokenType: string
  token: string
  userId: string | number
  lastLogged: string
}

이 예시에서는 스토어를 하나만 만들겠지만, 차후 늘어날 스토어들을 관리할 중앙 관리소를 만들겠습니다.
그리고 프로바이더를 사용해 스토어를 주입합니다.

src/store/index.ts


import AuthStore from "@/store/authStore";

export default {
  authStore = new AuthStore(),
}


src/index.tsx

import store from '@/store';
import { Provider } from 'mobx-react';

const app = (
    <Provider {...store}>
        <App />
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

이제 스토어를 사용해보겠습니다.
컴포넌트에 inject를 사용해서 스토어를 주입하면 props로 사용할 수 있습니다.
만약 여러 스토어를 사용하고 싶다면, 'authSotre', 'dealStore' 이런 식으로 추가하시면 됩니다.

src/Views/Auth/Login.tsx


import React, { useState } from 'react';
import AuthStore from "@/store/authStore";

interface Props extends RouteComponentProps {
  authStore: AuthStore
}

const Login = inject("authStore")(observer(({authStore, history}: Props) => {

  const [authData, setAuthData] = useState<AuthData>({
    email: '',
    password: '',
  });

  async function tryLogin() {
    try {
      const result = await authStore.login(authData);
      if (result.status === 200) {
        history.push('/dashboard');
      }
    } catch (e) {
      console.log(e)
    }
  }

  return (
      <>
    </>
  )

  export default Login;

처음 다뤘던 프레임워크가 뷰였어서 그런지, 뷰엑스와 비슷한 몹엑스가 훨씬 직관적이고 편했습니다.
리덕스를 사용해보진 않았지만...보기만해도 너무 복잡해 보였습니다.
언젠가는 배우겠지만, 선택할 수 있다면 몹엑스를 계속 사용할 듯 합니다.