[리액트] Redux 설치와 사용 (state 보관 / 갖고 오기 / 추가 )

장바구니 페이지 만들기
= 리액트 부트스트랩 사용방법

        {/* Redux - 장바구니 페이지 만들기 */}
        <Route path="/cart" element={<div></div>}></Route>

라우트 사용해서 장바구니 페이지 생성 가능.

장바구니 안에 들어갈 내용은 속성 element 사용해서 적어줌 

리액트 부트스트랩 사용해서 element 에 들어갈 html 생성
- 리액트 부트스트랩 import 필수

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 에 옮기기 - import 필수

import Cart from "./routes/Cart.js";

임포트 하기

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

컴포넌트 넣어주기

장바구니 데이터를 state 에 넣고싶으면

state 를 Cart 에만 필요한게 아니라

다른 곳에서도 필요할 경우, 

 

최상위 컴포넌트인 App.js 에다가 만드는게 나음

= 대신 props 해서 사용해줘야 함.

---

Redux 사용
- props 없이 state를 공유할 수 있게 도와주는 라이브러리

1) package.json 파일을 열어서

"react"

"react-dom" 

= 두개가 18.1.x 이상이면 사용가능

2) 터미널 열어서 아래 코드 입력

npm install @reduxjs/toolkit react-redux

---

Redux 셋팅

 

1) 파일을 하나 만들어준다 
- 리덕스를 쓰면 스테이트를 보관하는 통

src 폴더 안에다가 파일 생성

- store.js

2) 아래 코드 store.js 에 넣어주기

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

3) index.js 가서 store 쓰겠다고 선언
- Provider 라는 컴포넌트와 아까 작성한 파일을 import 해주기

 <Provider store={import해온거}> 이걸로 <App/> 을 감싸주기

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

---

Redux store에 state 보관(생성) 하기
- createSlice 함수 쓰기

1) createSlice 함수 사용
- import 도 해주기

import { configureStore, createSlice } from "@reduxjs/toolkit";
createSlice({});
export default configureStore({
  reducer: {},
});

안에 중괄호 써주고 중괄호 안에 state 생성

2) state이름 하고 state값 써준다.

createSlice({
  name: "state 이름",
  initialState: "김씨",
});

initialState 안에다가 실제 state의 값(김씨) 넣기

createSlice({
  name: "user",
  initialState: "김씨",
});

이렇게 하면 user State 생성.

3) configureStore( ) 안에 등록
reducer: {} - 여기 안에다가 만든 state 등록해주기

let user = createSlice({
  name: "user",
  initialState: "김씨",
});

만든 createSlice 를 변수같은 곳에 저장

export default configureStore({
  reducer: { user: user.reducer },
});

작명 : state 이름 넣기 ( 작명은 state 이름과 똑같이 함 )

그리고, 뒤에다가 . 찍고 reducer

---

 store에 있던 state 갖다 쓰기
- useSelector() 사용

 

cart.js 로 가서 생성한 state 를 갖다쓰기
- 컴포넌트 상단, return 문 밖에 (위에) 써주기
1) useSelector() - import 해주기

import { useSelector } from "react-redux";  
  
  useSelector((state) => {
    return state;
  });

보통 useSelector 함수 안에

(state) => {
    return state;
  }

이거 넣어주고 시작. 

2) 변수에 넣어서 사용

  let a = useSelector((state) => {
    return state;
  });

이렇게 사용

useSelector((state) => {
    return state;
  });

이 곳에서는 store 에 있던 모든 state가 이 자리에 남음

  let a = useSelector((state) => {
    return state;
  });
  console.log(a);

출력하면 오브젝트 자료가 남는 거 확인.

오브젝트 자료로 남는 이유 >>
리덕스 스토어는 여러 슬라이스의 상태를 관리하기 위해 객체 형태로 상태를 저장함.
각 슬라이스는 스토어의 상태 객체에서 키-값 쌍으로 저장.

---

state 값 만 출력하기

state의 name을 뒤에 넣어주기

 console.log(a.user);

.user 을 뒤에 추가

---

state 추가하기

createSlice 똑같이 하나 더 써주기

import { configureStore, createSlice } from "@reduxjs/toolkit";
let user = createSlice({
  name: "user",
  initialState: "김씨",
});
// createSlice 추가
let stock = createSlice({
  name: "stock",
  initialState: [10, 11, 12],
});

export default configureStore({
  reducer: { user: user.reducer },
});

등록도 필수로 해주기

export default configureStore({
  reducer: {
    user: user.reducer,
    stock: stock.reducer,
  },

출력 잘 되는 거 확인 가능

---

useSelector 사용법

어떤 스테이트만 갖다 쓸 지 지정할 수 있다.

  let a = useSelector((state) => {
    return state.user;
  });

 store 에 있던 state 중에 user 라는 항목만 갖다 쓸 수 있음.

a 를 출력해봤을 때 user 값인 김씨가 출력

※ 중괄호 하고 return 동시에 생략해서 사용해줄 수도 있다