[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[5]

 

1. 리엑트 어플리케이션 적용

 

이번에는 리액트 어플리케이션에 리덕스를 적용할 차례입니다.

 

스토어를 만들고 리엑트 어플리케이션에 리덕스를 적용하는 작업을 합니다.

src 디렉토리의 index.js 파일을 통해서 처리가 됩니다.

 

 

1.1 스토어 만들기

 

가장 먼저 스토어를 추가합니다

스토어는 앞서 언급한 것처럼 최상위 파일 index.js 안에 스토어를 추가합니다. 

 

- src/index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import rootReducer from './modules';

// 스토어 생성
const store = createStore(rootReducer)

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

// 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();

 

 

1.2  Provider 컴포넌트를 사용하여 프로젝트 리덕스 적용

 

리액트 컴포넌트에서 스토어를 사용하려면 App 컴포넌트를 react-redux에서 제공하는

"Provider" 컴포너트로 감싸 주어야 합니다.

이 컴포넌트를 사용하기 위해서는 store를 props로 전달해 주어야 합니다.

 

 

- src/index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import rootReducer from './modules';

// 스토어 생성
const store = createStore(rootReducer)

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

// 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();

 

 

1.3  Redux DevTools 설치/적용

 

Redux DevTools 는 리덕스 개발자 도구로 크롬 확장 프로그램 설치를 지원합니다.

크롬 웹스토어에서 검색하여 해당 툴을 설치합니다.

 

 

Redux DevTools

 

설치한 후에는 이제 리덕스토어를 생성하는 과정을 적용할 수 있습니다.

 

먼저 아래의 패키지를 설치합니다.

 

 

yarn add redux-devtools-extension

 

 

그리고 아래와  같이 composeWithDevTools 함수를  추가해 줍니다.

 

 

- src/index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import rootReducer from './modules';
import { Provider } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';

// 스토어 생성
const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// 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();

 

이제 브라우저를 엸어서 Redux 탭을 열어 보고 리덕스 개발자 도구가 잘 나타나는지 확인해 보세요.

 

state 탭을 열어서 리덕스 스토어 내부 값이 트리구조로 보이면 끝입니다.