React Redux 2 : store에 state 보관하고 쓰는 법

장바구니 페이지를 만들어보자
store안의 state를 Cart 컴포넌트에 데이터바인딩 해보기

Cart.jsx 파일생성 후 라우터 1개만들기

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

장바구니 페이지에서 사용할 Table 레이아웃

(Cart.jsx)

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

위 <Cart /> 컴포넌트에
아래 data를 store에 저장 후 Redux를 활용해 데이터바인딩 해보자

[
  {id : 0, name : 'White and Black', count : 2},
  {id : 2, name : 'Grey Yordan', count : 1}
] 

Redux store에 state 보관하는 법

step 1. createSlice( ) 로 state 만들고
step 2. configureStore( ) 안에 등록

(store.js)

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

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})

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

1. createSlice( ) 상단에서 import 해온 다음에
   { name : 'state이름', initialState : 'state값' } 이거 넣으면 state를 생성할 수 있다.
   createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 된다.

2. state 등록은 configureStore( ) 안에 하면 된다.
   { 작명 : createSlice만든거.reducer } 이러면 등록 끝!
   여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능하다.

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

(Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  const a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

store를 쓸 컴포넌트에서

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

위 코드를 쓰면 store에 있던 모든 state가 그 자리에 남는다.
변수에 저장해서 출력해보면 확인가능하다.

리턴과 중괄호는 생략이 가능하기 때문에 아래처럼 축약가능하다.

const a = useSelector((state) => state.user )