mobx

Jihyun-Jeon·2022년 8월 2일

React

목록 보기

22/26

관찰하려는 값을 객체에 만든다.

// AppStore.tsx
// [순서1] - store에 저장할 데이터를 객체에 설정해 줌

import { observable } from 'mobx'

// [질문]makeAutoObservable 로 하면 안되는지?
// [질문] useStore 훅을 사용하는 이유는?
// [질문] global variable , useContext 사용의 차이?
const AppStore = observable({
  //Observable State : 를 만들면 MobX가 이제부터 내부의 객체를 " 관찰 " 할 수 있어 변화가 일어나면 바로 확인할 수 있다.
  text: 'Initial text',
  changeText(data) {
    this.text = `changed ${data}`
  },
})

export default AppStore

사용시 useObserver()안에 넣는다.

// [순서2] - 사용하는 곳1
import { useObserver } from 'mobx-react'

import SomeComponent from '../../pages/SomeComponent/SomeComponent'
import AppStore from '../AppStore/AppStore'

const store = AppStore

const Nav = () => {
  return useObserver(() => (
    <div className="App" style={{ border: '1px solid black' }}>
      <div>
        <i>1. AppComponent: AppStore의 초기값 :</i> {store.text}
      </div>
      <div>
        <button
          onClick={() => {
            store.changeText('This is text from App')
          }}
          style={{ backgroundColor: 'yellowgreen' }}
        >
          2. AppComponent : Change 버튼
        </button>
      </div>
    </div>
  ))
}

export default Nav

2에서 사용한 값을 다른 곳에서도 같은 값을 사용했다면, 자동으로 여기의 값도 바껴야한다.

// [순서3] - 사용하는 곳 2(사용하는 곳1에서 바꾸면 여기도 바껴야 함)
import { useObserver } from 'mobx-react'

import AppStore from '../../components/AppStore/AppStore'

const store = AppStore

const SomeComponent = () => {
  return useObserver(() => (
    <div>
      <div>
        <i>3. otherComponent : store의 값이 사용되는 다른 컴포넌트:</i> {store.text}
      </div>
      <div>
        {/* <button onClick={() => store.changeText('This is text from component')}>
          Change text from component
        </button> */}
      </div>
    </div>
  ))
}

export default SomeComponent