[해결 방법] could not find react-redux context value;

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
 
reportWebVitals();
 

🚨 다음과 같은 오류 발생

could not find react-redux context value;

please ensure the component is wrapped in a <Provider>

 

 

발생 원인

Redux store를 전역으로 사용하기 위한 설정, store prop 공유가 기재되어있지 않음

 

 

해결 방법

Redux 스토어를 전역적으로 제공하기 위해 Provider 선언 및 store prop 전달

 - Provider: 하위 컴포넌트인 App 컴포넌트와 그 아래에 있는 모든 컴포넌트에 Redux 스토어를 제공
 - store: Redux 스토어 객체, Provider 컴포넌트의 store prop으로 전달되어 모든 컴포넌트에 공유됨

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
 
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index';
 
import './index.css';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
 
reportWebVitals();