react typescript hooks mobx6 사용하기!(useContext없이)

mobx란?

MobX는 전역 상태 라이브러리중 하나입니다!

특징

• React에 종속적인 라이브러리가 아님(vue, anglur등에서도 사용가능)
• redux와 다르게 store에 제한이 없음
• observable을 기본적으로 사용하고 있음
• Mobx는 절대적으로 필요한 경우에만 state 변경 (어떤 뜻인지를 모르겠음)
• Typescript를 기반으로 만들어짐

개념

• observable: 추적 가능한 state 정의
• action: state를 변경하는 메소드
• computed: state와 캐시로부터 새로운 결과를 반환

observable

• Observable State를 만듬
  • state의 변화는 reaction과 computations를 일으킴
  • 관찰할 수 있는 변화가 일어나면 탐지함
• 시간에 따라 변할 수 있는 값들을 MobX에게 알려주기 위해

action

• store에 있는 state를 변경시킨다.
  • makeObservable을 사용하면 action을 따로 작성해줘야 하지만, makeAutoObservable은 이를 대신해준다.

functionName(pramater){
		~~
}

computed

• store에 있는 값과 pramater에 값을 이용해서 계산된 결과를 반환한다.

get functionName(pramater){
		~~
		return value /* 타입은 상관없다. */
}

 

store만들기

object형식과 class방식 둘다 해보겠습니다

Object(observable)

import { observable } from "mobx";

interface TestStoreProps {
  number: number;
  increase: () => void;
}

const Tstore = observable<TestStoreProps>({
  number: 1,
  increase() {
    this.number++;
  },
});
export default Tstore;

Class(makeAutoObservable)

import { action, makeAutoObservable, observable } from "mobx";

class Tstore {
  constructor() {
    makeAutoObservable(this);
		// makeAutoObservable이 다른 action, computed를 자동으로 선언
		/*
		makeAutoObservable(this, {
		      value: observable,
		      toggleValue: action,
		    });
		이렇게 해도 가능
		*/
  }
  value = "Hello";

  toggleValue() {
    this.value = this.value === "Hello" ? "World" : "Hello";
    console.log(this.value);
  }
}

const store = new Tstore();

export default store

Class(makeObservable)

import { action, makeObservable, observable } from "mobx";

class Tstore {
  constructor() {
    makeObservable(this, {
      value: observable,
      toggleValue: action,
    });
//수동설정
  }
  value = "Hello";
  toggleValue() {
    this.value = this.value === "Hello" ? "World" : "Hello";
    console.log(this.value);
  }
}

const store = new Tstore();

export default store;

*주의사항

object형식으로 만들면 state model형식으로 만들어 지기 때문에 action함수를 거치지 않아도 value가 변경이 가능하다.

 

store사용하기

 

useStore

import Tstore from "./TestStore";

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

꼭 이렇게 store를 하나로 모을 필요는 없습니다. 용도별로 따로 만들어도 됩니다!

사용법

import React from "react";
import UseStore from "@store/index";
import { observer } from "mobx-react";

function Example() { 
/* const Example=observer(()=>{})
	 export default Example; */
  const { Tstore } = UseStore();
	
	return (
		<div>{Tstore.number}</div>
    <button onClick={() => Tstore.increase()}>+1</button>
	);
}

export default observer(Example);