더북(TheBook)

13.1.8 Provider 컴포넌트로 리액트 앱에 store 연동

 

Provider는 react-redux 라이브러리에 내장된 리액트 애플리케이션에 손쉽게 스토어를 연동할 수 있도록 도와주는 컴포넌트입니다.

이 컴포넌트를 불러온 후 연동할 프로젝트의 최상위 컴포넌트(이 프로젝트에서는 App 컴포넌트)를 감싸고, Provider 컴포넌트의 propsstore를 넣어 주면 됩니다.

src/index.js

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./containers/App’;
import ‘./index.css’;
 
// 리덕스 관련 불러오기
import { createStore } from ‘redux’;
import reducers from ‘./reducers’;
import { Provider } from ‘react-redux’;
 
// 스토어 생성
const store = createStore(reducers);
 
ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById(‘root’)
);

 

이제 리액트 컴포넌트에서 스토어를 사용할 준비가 끝났습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.