React 쇼핑몰(Redux: 설치 및 세팅)

Redux를 배우기 위해 쇼핑몰 장바구니 기능을 구현해보겠습니다.

Redux는 상태 관리 라이브러리로, props 전송 없이도 상태를 공유할 수 있게 도와줍니다.

 

1. 장바구니 페이지 만들기

(App.js)

<Route path="/cart" element={ <Cart/> } />

먼저 App.js 파일에서 /cart로 접속할 수 있는 <Route>를 추가합니다.

그리고 Cart.js 파일을 새로 만들어서 표를 하나 만듭시다.

(Cart.js)

 import { Table } from 'react-bootstrap'
 
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>상품명</th>
      <th>수량</th>
      <th>변경하기</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>안녕</td>
      <td>안녕</td>
      <td>안녕</td>
    </tr>
  </tbody>
</Table>

 

2. Redux 설치

npm install @reduxjs/toolkit react-redux

터미널에 위의 코드를 입력해서 redux를 설치합니다.

이때, package.json 파일에서 'react'와 'react-dom'의 버전이 18.1.x 이상이여야 사용가능합니다.

 

3. Store 설정

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  reducer: {
    // 리듀서들을 여기에 추가
  },
});

이번에는 store.js 파일을 생성하고 위의 코드를 넣어줍니다.

configureStore() 함수는 전역 state를 보관하는 store 객체를 생성합니다.

 

4. Provider 컴포넌트 사용

(index.js)

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

다음은 index.js 파일에 들어가서 Provider 컴포넌트와 store 객체를 immport해서 사용합니다.

그리고 <Provider store={import해온거}>로 <App/>을 감싸면 <App>과 자식 컴포넌트들은 store.js의 state를 자유롭게 사용할 수 있습니다.