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

• ⭐⭐ 항상 뭐 배우기 전에 이걸 왜 쓰는지 생각하는게 중요하다고 강의에서 계속!! 말했다.
  Redux 라이브러리를 쓰는 이유는 state를 Redux store 에 보관해 둘 수 있는데
  모든 컴포넌트가 여기에 있는 state를 직접 꺼내쓸 수 있어서
  props없이도 편리하게 state 공유가 가능하기 때문이다.
  

🖤 Redux store에 state를 보관하는 법

🤍 state 만들기 위한 간단한 step 2가지

• step 1. createSlice() 로 state를 만들고
• step 2. configureStore() 안에 등록하면 된다.

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(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

• 아무 컴포넌트에서 useSelector((state) => { return state } ) 을 쓰면 store에 있던 모든 state가 그자리에 남는다.
• a를 출력해보면 {user:'kim'} 이 나온다.

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

• JS에서는 { return 　} 을 생략할 수 있으므로 위 코드처럼 간략하게도 쓸 수 있다.

🖤 Redux 가 편하니까 맨날 쓰면 되나요?

• 간단하거나 컴포넌트가 몇 개 없을 때 쓰는게 제일 좋다.
• 왜냐하면 위와같은 경우에는 props 를 쓰는게 더 코드가 짧기 때문이다.

---

📒 오늘의 숙제

: 장바구니 데이터를 Redux store 안에 보관하고 Cart.js 페이지에 가져와서 데이터바인딩 해보기, 데이터 갯수에 맞게 표를 생성해달라고 반복문 써보기.

(장바구니 데이터)

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

(store.js)

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

(Cart.js)
        <tbody>
          <tr>
            <td>{state.basket[0].id}</td>
            <td>{state.basket[0].name}</td>
            <td>{state.basket[0].count}</td>
            <td>안녕</td>
          </tr>
          <tr>
            <td>{state.basket[1].id}</td>
            <td>{state.basket[1].name}</td>
            <td>{state.basket[1].count}</td>
            <td>안녕</td>
          </tr>
        </tbody>

• store.js 에 basket 이라는 변수를 만들어 이름이 name 이고 자료에 장바구니 자료를 넣었다.
• 이 때 나는 위에서 계속 배웠던대로 따옴표 안에 데이터를 넣었는데 그렇게 되면 자료가 string 형태로 바뀌어 데이터바인딩이 잘 되지 않았다.

• 그렇다면 내가 string 형태가 아닌 배열 형태의 자료를 넣으면 되지 않을까? 라는 생각에 따옴표를 없애보았고, 데이터바인딩이 아주 잘 됐다.