Redux(1)

Redux의 용도

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

Redux를 쓰면 좋은 점

-귀찮은 props 전송을 하지 않아도 된다.
컴포넌트가 많아질 수록 전송하고 전송하고 전송해야 쓸 수 있는데 Redux를 쓰면 그걸 하지 않아도 사용 가능하다.

설치하는 법

npm install @reduxjs/toolkit react-redux

설치 전 주의 사항

pakage.json파일 열어서 "react", "react-dom"의 버전 확인하기.
두 개가 18.1.x 이상이면 사용 가능
이하라면 "react":"^18.1.0, "react-dom":"^18.1.0
이런 식으로 수정해서 파일 저장하고 npm install 하기.

redux 세팅하기

1. 아무데나 store.js 파일 만들어서 아래 코드 복붙

import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
  reducer: { }
}) 

이게 뭐냐하면 state들을 보관하는 파일임.


2.index.js파일 가서 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>
); 

그러면! 이제 App과 그 모든 자식 컴포넌트들은 store.js에 있던 state를 마음대로 꺼내쓸 수 있다.

Redux store에 state 보관하는 법

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가 그 자리에 남는다. 변수에 저장하면 사용이 용이하다. 진짜 나오는지 콘솔에 찍은 거 확인해보자.

Redux 사용 유의 사항!
간단한 거 만들면서 컴포넌트 몇 개 없을 때는 props 쓰는 게 더 짧음 ㅋ

이번 숙제: store.js에 장바구니 데이터 보관한 다음 Cart.js 적절한 곳에 꽂아보기.


나의 답변:

//store.js
  let stock  = createSlice({ //useState 역할임
    name : 'stock',
    initialState : 
     [
        {id : 0, name : 'White and Black', count : 2},
        {id : 2, name : 'Grey Yordan', count : 1}
      ] 
})
export default configureStore({
  reducer: { 
    user : user.reducer,
    stock : stock.reducer   
  }
}) 

//Cart.js
function Cart(){
   let stock = useSelector((state)=>{return state.stock});
  //생각해보니 이렇게 여기에 state를 이것만 가져오면 stock 밖에 쓸 수 없으니 전체로 해놓고 state.stock 이렇게 쓰는 게 유용 할 것 같다.
  return(
  <div>
         <Table> 
            <thead>
                <tr>
                <th>#</th>
                <th>상품명</th>
                <th>수량</th>
                <th>변경하기</th>
                </tr>
            </thead>
            <tbody>
                {
                  stock.map(function(a, i){
                  return <CartContent stock={stock[i]} i={i}/>
                  })
   				//a는 콜백함수, 돌아가면서 하나 하나 뽑아주는 거
                //i는 요소의 인덱스임.
                }
           </tbody>
        </Table> 
       </div> 
  )
  }
  function CartContent({stock , i}){
    return(
        <tr>
        <td>{[i+1]}</td>
        <td>{stock.id}</td>
        <td>{stock.name}</td>
        <td>{stock.count}</td>
        </tr>
    )
}

다른 방식:

//Cart.js
<tbody>
  {
    state.cart.map((a, i)=>
      <tr key={i}>
        <td>1</td>
        <td>{state.cart[i].name}</td>
        <td>{state.cart[i].count}</td>
        <td>안녕</td>
      </tr>
     )
   }
</tbody>