Redux

Redux 라이브러리를 사용하면 컴포넌트 간에 props없이 state 공유가 가능하다.

<원리>

Redux를 설치하고 state들을 저장해줄 자바스크립트 파일을 만들면 그곳에 모든 state를 다 보관해줄 수 있다.

그리하여 모든 컴포넌트들이 props 없이 state들을 가져다 쓸 수 있게 되는 것이다.

<설치하기>

💡 npm install @reduxjs/toolkit react-redux

<사용을 위한 셋팅>

1. store.js 파일을 생성한다 (작명은 자유지만 다른 사람이 봤을 때 이해하기 쉽도록..!!!)

   그리고 아래와 같이 코드를 작성한다.

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

2. 가장 상위 파일인 index.js에 store로 감싸준다.

   import React from "react";
   import ReactDOM from "react-dom/client";
   import "./index.css";
   import App from "./App";
   import reportWebVitals from "./reportWebVitals";
   import { BrowserRouter } from "react-router-dom";
   // import 해주는거 잊지말기!!!!!!
   import store from "./store.js";
   
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(
   // <Provider store={store}}></Provider> 라는 컴포넌트로 전부 감싸주기.
     <Provider store={store}>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </Provider>
   );
   
   // If you want to start measuring performance in your app, pass a function
   // to log results (for example: reportWebVitals(console.log))
   // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
   reportWebVitals();

   <Redux에 state 만드는 방법>

   // store.js
   import { configureStore } from "@reduxjs/toolkit";
   
   // 1. creatSlice를 사용해서 state를 만들어주자.
   let user = createSlice({
   	name: 'state이름',
   	initialState: 'state값'
   })
   
   export default configureStore({
     reducer: {
   // 2. 꼭 여기 등록하는거 잊지말자!!
   // (작명 자유. 귀찮다면 state이름 그대로 쓰자)
   	변수명: 변수명.reducer
   },
   });

   <가져다 쓰는 방법>

   • state를 사용할 파일로 이동후 useSelector를 사용하자

     function Cart(){
     // 변수에 담아서 사용
     let a = useSelector((state)=>{return state})
     console.log(a.userName) // state를 꺼내는 방법
     return(
     	//생략
     )
     
     }

     ➕ 추가 학습!

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

     특정 state만 가져와서 쓸 수도 있다.

     💡 let a = useSelector((state)=>{return state.쓰고싶은 state의 이름})

❗결론

• redux store안에 모든 state를 담을 필요는 없고 공유해야할 state만 넣자.
• 간단한 프로젝트를 만들땐 그냥 props 쓰자.
• 컴포넌트가 많아지면 redux 쓰는게 낫다.

< 실습>

Q. 아래의 데이터를 Redux store에 보관했다가 Cart.js 페이지에 가져와서 데이터 바인딩 해보자

1. creatSlice를 사용해서 state를 만들어주자.
2. 등록하는거 잊지말자!!
3. useSelector를 사용하여 state를 가져오자

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

// store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";
// 1. createSlice로 state를 만들어주자.
let item = createSlice({
  name: "item",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
  ],
});
// 2. 등록하는거 잊지말자!!
export default configureStore({
  reducer: {
    item: item.reducer,
  },
});

function Cart() {
// 3. useSelector를 활용하여 state를 가져오자
  let a = useSelector((state) => {
    return state;
  });
  return (
    <div>
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>상품명</th>
            <th>수량</th>
            <th>변경하기</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>{a.item[0].name}</td> 
            <td>{a.item[0].count}</td>
            <td>안녕</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

<state 변경하는 법>

1. state 수정해주는 함수 만들기
2. 만든 함수 export 하기

let user = createSlice({
  name: "userName",
  initialState: "kim",
// state 수정해주는 함수 양식.
// 함수에 파라미터를 넣으면 기존의 state값을 가리킴.
	reducers: {
		changeName(){
			return 'john kim'
		}
	}
});
// 만든 함수 export하기
export let {export하고싶은 함수명} = user(변수명).actions

1. 만든 함수 import 해서 사용

   //cart.js
   // useDispatch도 필요하다
   // useDispatch는 store.js에 요청을 보내주는 함수다.
   let dispatch = useDispatch()
   {state.user}의 장바구니
   {state.item.map((a, i) => {
     return (
       <tr>
         <td>1</td>
          <td>{state.item[i].name}</td>
           <td>{state.item[i].count}</td>
   	      <td>안녕</td>
   				<td>
   					<button onClick={()=>{
   						dispatch(changeName())
   					]}>+</button>
   				</td>	
       </tr>
   	 );
    })}

버튼을 누르면 {state.user}의 장바구니 부분이 kim의 장바구니에서 john kim의 장바구니로 변경된다.

<state가 array/object일때 변경 방법>

let user = createSlice({
  name: "userName",
  initialState: { name: "kim", age: 27 },
  reducers: {
    changeName(state) {
      return { name: "park", age: 27 };
    },
  },
});

출처. 코딩애플