react redux 2

redux로 state 보관하고 쓰는 법
저번 정리글에 이은 2번째 redux 정리글.

1.redux를 왜 쓰는가?

props전송없이 컴포넌트간 state전송을 위해.
jsx파일 하나 파서,
redux를 통해 컴포넌트 간 공유가 필요한 state들을 모아두면
props롤 일일이 전송할 필요없이 공유가 가능.
컴포넌트 간의 데이터 흐름을 단순화하고 일관되게 유지하는 역할(출처 : copilot)

2.그럼 처음부터 redux 쓰면 됐던거 아닌가요?

redux가 모든 조건에서 최고는 아님.
컴포넌트 몇개 없고 공유할 state가 적다면 그냥 props 쓰는게 나을듯.
props도 결국 쓰이는 문법.
redux가 더 어렵고 복잡하니 props배우고 redux배우는게 맞다. 아무튼 맞음.

3.Redux store에 state 보관하는 법

step 1. createSlice( ) 로 state 만들기

createSlice : state 정의.

name : state이름
initialState : 'kim'

이렇게 작성.

let user = createSlice( )

이렇게 변수로 받으면 활용이 편할듯.

step 2. configureStore( ) 안에 등록

위에 createSlice로 만든 user변수를
다른 컴포넌트에서 쓸 수 있게 configureStore로 redux에 등록.
정확히는, Redux 스토어(store) 를 설정(출처 : copilot)

state명 : state명.reducer

이렇게 작성.

전체적인 코드

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',//state이름
  initialState : 'kim'//state에 들어갈 값
})

export default configureStore({
  reducer: {
    user : user.reducer//createSlice로 만든 user변수를 등록
  }
}) 

Redux store에 있던 state 가져다쓰는 법

useSelector를 import.
store.jsx에 reducer로 등록하였던 state를 useSelector를 통해 불러와 쓴다.

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

이러면 reducer에 작성한 모든 state가 a라는 변수안에 들어가게됨.

하나만 가져다쓰려면요?

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

state.reducer에 등록한 state명 하나
이렇게 하나만 불러올 수 있음.

state를 싹다 불러올 필요가 없다면, 이렇게 하나씩 불러오는 것도 좋을듯.

4.오늘숙제

임의로 주어진 오브젝트 배열을 유저의 장바구니 데이터로 가정, cart 페이지에 배열의 내용을 뿌려주기.

내 코드

1. store.jsx에서 createSlice로 userCart라는 state 하나 생성. initialState로 주어진 오브젝트배열을 state의 값으로 설정.
2. configureStore로 공유 state로 등록.
3. cart.jsx에서 useSelector로 userCart를 불러옴.
4. map함수를 이용하여, 배열의 길이만큼 오브젝트의 내용을 뿌려주기.
   끝.

// store.jsx
import { configureStore, createSlice } from "@reduxjs/toolkit";

let userCart = createSlice({
  name: "userCart",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
  ],
});

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

//cart.jsx
/* eslint-disable no-unused-vars */
import { Button, Table } from "react-bootstrap";
import { useSelector } from "react-redux";

const Cart = () => {
  let userCart = useSelector((state) => {
    return state.userCart;
  });
  console.log(userCart);
  return (
    <div>
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>상품명</th>
            <th>수량</th>
            <th>변경하기</th>
          </tr>
        </thead>
        <tbody>
          {userCart.map(function (a, i) {
            return (
              <tr>
                <td>{a.id}</td>
                <td>{a.name}</td>
                <td>{a.count}</td>
                <td>
                  <Button>+</Button>
                  수량변경
                  <Button>-</Button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
};

export default Cart;