REACT- Redux1. redux설치와 props대신 Redux를 사용하는 이유

React를 사용하려면 Redux의 개념과 어떻게 사용하는지에 대해서 알아야한다는데, 

설치 과정이 요리갔다 저리갔다여서

간단명료하게 설치방법과 셋팅, Redux를 왜 쓰는지에서 알아보고자한다.

 

 

만들려는 것은 Redux를 이용하여 장바구니만들기이다. (목표목표~)

 

 

| 페이지  이동 경로 설정

우선 페이지 이동할 수 있도록 라우터 경로 설정, 

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

 

| 장바구니인 Cart.js 컴포넌트 생성

Cart.js 컴포넌트를 만들기 ( 디자인은 우선 간단하게 bootstrap 라이브러리의 table 을 사용)

import {useState, memo, useMemo} from 'react';
import {Table} from 'react-bootstrap';

function Cart(){ 

    return (
        <div>
           <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> 
        </div>
    )
}

export default Cart;

하고 , App.js에 export한 것을 import 가져온다.

 

 

장바구니 데이터를 state에 보관해두고 데이터바인딩하자.

근데 이 state를 어디다가 만드는 것이 좋을까? Cart.js안에서 사용해도 괜찮다. 근데 이 Cart.js에만 필요할까?

 

App.js, Detail.js , Cart.js도 필요하지않나? 그러면 어디다 만들어야하나?

최상위 컴포넌트인 App.js에다 만들어야한다. 

근데 그 props를 여기다하고 저기다하고 또 저쪽에다 입력하고..

이게 힘들다면 다른 방법 Redux가 있다.

 

🚨Redux, 이것을 사용하면 컴포넌트들 간에 props없이 State 공유가 가능하다.

 

어떻게 가능하냐면

Redux를 설치하면 

자바스크립트 파일 안에 state들을 다 보관해둘 수 있고

모든 컴포넌트들이 이 state들을 다 빼서 사용할 수 있다는 것이다.

 

이런 식으로 말이야.

갖다 빼서 쓸 수 있는 redux, 그러면 props 전송할 필요가 없지.

 

| Redux 설치

하기전에! 우선 package.json으로 가자. 

리액트와 리액트 돔 버전이 18.0 이상이어야하니, 이것을 확인할 것.

 

확인하고나서 터미널에 입력 (설치 후 npm start하여 확인)

npm install @reduxjs/toolkit react-redux

 

| 셋팅1. Store.js 파일 생성 

src안에 Store.js 파일을 만들고

리덕스를 쓰면 state를 보관하는 통을 만들어줘야하기 때문에 Store.js하나를 만들어주고 안에

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

입력하면 스토어 생성 끝,

 

그 두 번째는

 

| 셋팅2.  안녕, index.js? 나  이 Store.js좀 선언할게

index.js에 가서 "내가 이 Store를 쓰겠습니다."하고 선언을 해줘야한다. <Provider store={store} > 로 감싸주기

 

index.js

import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store/store.js';

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

 

import 할 것

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

 

이렇게 하면

App이라는 컴포넌트와 그 모든 자식들은 이 store.js에 있는 state를 전부 사용이 가능해진다.

 

 

 

 

이렇게 Redux 설치 시 주의할 점, 셋팅방법, 왜 리덕스를 사용하는지에 대한 이유를 알아보았다.

 

다음편에는

이 셋팅한 Redux을 사용해보려한다.