context 사용 시 에러가납니다.

강사님이 만드신 소스에서 그냥 간단하게 + - 되는 카운터 기능의 예제를 진행중입니다.

역시 hooks를 이용하려구 하구요.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import StoreProvider from './Context';

ReactDOM.render(
  <StoreProvider>
    <App />,
  </StoreProvider>,
  document.getElementById('root'),
);

-------------------------------------------------------------------------

// src/Context.js

import React, { createContext } from 'react';
import { counterStore } from './store/counterStore';

export const storeContext = createContext({ counterStore });

export const StoreProvider = ({ children }) => {
  return <storeContext.Provider>{children}</storeContext.Provider>;
};

export default StoreProvider;

-------------------------------------------------------------------------

// src/App.js

import React from 'react';
import { useObserver } from 'mobx-react';
import useStore from './useStore';
// import { counterStore } from './store/counterStore';

function App() {
  const { counterStore } = useStore();

  return useObserver(() => (
    <div>
      <h1>{counterStore.number}</h1>
      <button onClick={counterStore.increase}>+1</button>
      <button onClick={counterStore.decrease}>-1</button>
    </div>
  ));
}

export default App;

-------------------------------------------------------------------------

// src/store/counterStore.js

import { observable } from 'mobx';

const counterStore = observable({
  number: 0,
  increase() {
    counterStore.number++;
  },
  decrease() {
    counterStore.number--;
  },
});

export { counterStore };

-------------------------------------------------------------------------

// src/useStore.js
import { useContext } from 'react';
import { storeContext } from './Context';

const useStore = () => {
  const { counterStore } = useContext(storeContext);

  return { counterStore };
};

export default useStore;

-------------------------------------------------------------------------

TypeError: Cannot destructure property 'counterStore' of 'Object(...)(...)' as it is undefined.

실행시 위와 같이 디스트럭처링을 할 수 없다고 나옵니다.

그래서 위의 src/useStore.js 부분에서 디스트럭처링 하지 않고 그냥 하게되면

// src/useStore.js
import { useContext } from 'react';
import { storeContext } from './Context';

const useStore = () => {
  const counterStore = useContext(storeContext);

  return { counterStore };
};

export default useStore;

TypeError: Cannot read property 'number' of undefined

Context API를 사용하지 않을 경우 스무스하게 잘 되는데 Context만 이용하려 하니 게속 에러가 발생합니다..

import { useLocalStore } from 'mobx-react';
import React from 'react';
import counterStore from './counterStore';

export const storeContext = React.createContext(null);

export const StoreProvider = ({ children }) => {
  const store = useLocalStore(counterStore);

  return (
    <storeContext.Provider value={store}>
      {children}
    </storeContext.Provider>
  );
};

export default StoreProvider;

Provider에 store을 안 넣으셨네요.

import * as React from 'react';
import { storeContext } from './Context';

function useStore() {
  const store = React.useContext(storeContext);
  if (!store) {
    // this is especially useful in TypeScript so you don't need to be checking for null all the time
    throw new Error('useStore must be used within a StoreProvider.');
  }
  return store;
}

export default useStore;

인프런 커뮤니티 질문&답변