React에서 MobX 사용해보기 3(react context 사용해서 observable 공유하기

mobx 사용해보기 1에서 연장된 내용으로 보면된다.

context 를 사용하면 여러 곳에서 상태를 공유할 수 있는데, 기억이 잘 안난다.

다시 한번 찾아봐야 할 것 같다.

 

아무튼 사용방법을 정리하자면

context 생성 -> provider에 props로 store 공유하기 -> usecontext 로 원하는 곳에서 state사용하기

뭐 이런 식인데 코드를 보자

 

1. context 생성

 - 일단 여기서는 context 생성만 보도록 하자

 - react에서 createContext 가져와서 만들어준다.

import { createContext, useContext } from "react";

// Context 생성

export const CounterContext = createContext();

// Provider 생성

export const CounterProvider = CounterContext.Provider;

// Store에 있는 value를 사용하기 위한 Hooks

export const useCounterStore = () => useContext(CounterContext);

 

2. provider 로 app 컴포넌트 감싸고 props로 store 공유하기

 - 기존에 App 컴포넌트에 props로 store를 전달해줬는데 그거 뺀다.

 - 필자는 1번에서 provider 를 생성해 놓아서 그걸 가져왔는데, 그렇게 안하고 CounterContext.Provider로 감싸줘도 같은 내용이다.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import counterStore from './countStore';

import { CounterProvider } from './context/counterContext';

const store = new counterStore();

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <CounterProvider value={store}>

      <App />

    </CounterProvider>

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

3. Store에 있는 value 사용하기

 - 커스텀훅 만들어서 사용했다. 1번 맨 밑에 보면 될듯

import './App.css';

import { observer } from 'mobx-react';

import { useCounterStore } from './context/counterContext';

function App() {

  const myCounter = useCounterStore();

  console.log('myCounter', myCounter);

  return (

    <div style={{ textAlign: 'center', padding: 16 }}>

      카운트: {myCounter.count}

      <br /><br />

      마이너스?: {myCounter.isNegative}

      <br /><br />

      <button onClick={() => myCounter.increase()}>+</button>

      <button onClick={() => myCounter.decrease()}>-</button>

    </div>

  );

}

export default observer(App);