[코딩애플] 쇼핑몰 프로젝트 Part6 - Redux

💁‍♀️ 장바구니 페이지 만들기

// Cart.js

import { Table } from 'react-bootstrap'

let state = useSelector((state)=> state)

<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>상품명</th>
      <th>수량</th>
      <th>변경하기</th>
    </tr>
  </thead>
  <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> 
</Table>

 

✏️ Redux

✏️ Redux 쓰면 좋은 점
- props 없이 편리하게 state 공유할 수 있게 도와주는 라이브러리
! 간단한 거 만들 때, 컴포넌트가 몇 개 없을 때 → props 쓰는게 더 이득임

- 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데, 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있음.
- 그래서 귀찮은 props 전송이 필요하지 않다. 

✏️ Redux 설치

npm install @reduxjs/toolkit react-redux

- redux toolkit은 redux의 개선 버전(문법이 좀 더 쉬워진다)
- package.json에서 "react", "react-dom" 버전이 18.1.x 이상이면 사용가능(아님 직접 수정하면 파일 저장하고 터미널에서 npm install 눌러도 됨)

✏️ Redux 셋팅

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

1. 아무데나 store.js 파일을 만들어서 위 코드를 복붙해준다. (state들을 보관하는 파일)

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

2. index.js 파일 가서 Provider 라는 컴포넌트와 아까 작성한 파일을 import 해온다. 그리고 밑에 <Provider store={import 해온거} 이걸로 <App/>을 감싸면 된다.

✏️ Redux store에 state 보관하는 법
- store.js 파일을 열어서 이렇게 코드짜면 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 } )  
  // let a = useSelector((state) => state.user ) 이렇게 하면 더 편리할 수도?! 편한 걸로 ㄱㄱ
  console.log(a)

  return (생략)
}

- 아무 컴포넌트에서  useSelector((state) => { return state } ) 쓰면 store에 있던 모든 state가 그 자리에 남는다. ({ user : 'kim' } 이런거 출력될듯)

✏️ store의 state 변경하는 법 
- state 수정해주는 함수부터 store.js에 만들어두고 그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 짠다.
1. store.js 안에 state 수정해주는 함수부터 만든다

let user = createSlice({  // 함수 작명 자유롭게
  name : 'user',  // 파라미터 하나 작명하면 그건 기존의 state가 된다
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state  // return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치움
    }
  }
})

// 이제 changeName() 쓸 때마다 'kim' -> 'john kim' 이렇게 변함

- slice 안에 reducers : { } 열고 거기 안에 함수 만들면 된다.

2. 다른 곳에서 쓰기 좋게 export 해두기

export let { changeName } = user.actions

- 이런 코드를 store.js 밑에 추가
- slice이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력됨
- 그걸 변수에 저장했다가 export 하라는 뜻일 뿐

3. 원할 때 import 해서 사용, 근데 dispatch()로 감싸서 써야함
- 예를 들어 Cart.js 에서 버튼같은거 하나 만들고 그 버튼 누르면 state를 'kim' -> 'john kim' 으로 변경하고 싶으면

 

// Cart.js

import { useDispatch, useSelector } from "react-redux"  //useDispatch 라는 것도 라이브러리에서 가져오고
import { changeName } from "./../store.js"  // store.js에서 원하는 state변경함수 가져오고

(생략) 

<button onClick={()=>{
  dispatch(changeName())  //dispatch( state변경함수() ) 이렇게 감싸서 실행하면 state 진짜로 변경
}}>버튼임</button>

- 이렇게 코드 짜면 된다.

🤔 복잡한 것 같은데요?

store 안에 있는 state 수정하고 싶으면
- state 수정해주는 함수를 store.js에 만들어두고
- 컴포넌트는 그걸 부르기만 하는 식으로 state 수정하게 되어있음

! 컴포넌트에서 state 직접 수정하면 편하지 않나
- 당장은 편할 지 몰라도 나중에 프로젝트가 커지면 심각한 단점이 있을 수 있다.

- 컴포넌트 100개에서 직접 'kim' 이라는 state 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생하면 범인 찾으려고 컴포넌트 100개를 다 뒤져야한다.

- 근데 state 수정함수를 store.js에 미리 만들어두고 컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜놓으면 'kim'이 123이 되어버리는 버그가 발생했을 때 범인찾기가 수월하다. 범인은 무조건 store.js에 있기 때문! (수정함수를 잘 만들어놨다면)

✏️ redux state가 array/object인 경우 변경하려면
- 대충 {name : 'kim', age : 20} 이렇게 생긴 자료를 state로 만들어보자
- 근데 저기서 'kim' -> 'park' 이렇게 변경하고 싶으면 state 변경함수 어떻게 만들어야할까

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20}
    }
  }
})

- 이렇게 쓰면 return 오른쪽에 적은걸로 기존 state를 변경시키는 꼴이기 때문에 당연히 changeName() 사용시 변경된다.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})

- 근데 state를 직접 수정하라고해도 변경 잘 된다.
- 그 이유는 mmer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분인데 Redux 설치하면 딸려와서 그렇다. 

- 그래서 결론은 array/object 자료의 경우 state변경은 state를 직접 수정해버려도 잘 되니까 직접 수정하라! 
- 참고) 그래서 state 만들 때 문자나 숫자하나만 필요해도 redux에선 일부러 object 아니면 array에 담는 경우도 있다. 수정이 편리해지기 때문

✏️ state 변경함수가 여러개 필요하면
- 버튼을 눌렀을 때 age가 +10, +100 씩 증가하길 원할 때, +10 하는 함수 만들고 +100 하는 함수 만들 필요 X → 파라미터문법 이용

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){  // increase(10) 하면 +10, increase(100) 하면 +100
      state.age += a.payload 
    }
  }
})

 

💁‍♀️ 수량 +1 기능 만들기

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      let 번호 = state.findIndex((a)=>{ return a.id === action.payload })  // findIndex() 사용해서 같은 id 가진 상품 찾아서 +1
      state[번호].count++
    }
  }
})

// Cart.js

import { createSlice } from '@reduxjs/toolkit'

<tbody>
  {
    state.cart.map((a, i)=>
      <tr key={i}>
        <td>{state.cart[i].id}</td>
        <td>{state.cart[i].name}</td>
        <td>{state.cart[i].count}</td>
        <td>
          <button onClick={()=>{ dispatch(addCount(state.cart[i].id)) }}>+</button>  <!-- 버튼 누르면 옆에 있던 상품 id를 payload로 전송 -->
          <!-- 버튼 누르면 버튼 옆에 있는 상품 id 가져와서 이거랑 똑같은 id를 가진 상품을 state에서 찾아서 그걸 +1 -->
        </td>
      </tr>
     )
   }
</tbody>

 

💁‍♀️ 주문 버튼 누르면 장바구니 state에 새로운 상품 추가

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      state[action.payload].count++
    },
    addItem(state, action){  // addItem( {id : 2, name : 'Grey Yordan', count : 1} ) 이렇게 사용하면{id : 2, name : 'Grey Yordan', count : 1} 이 상품이 state에 추가
      state.push(action.payload)
    }
  }
})

// Detail.js

import { createSlice } from '@reduxjs/toolkit' 

<div className="col-md-6">
  <h4 className="pt-5">{찾은상품.title}</h4>
  <p>{찾은상품.content}</p>
  <p>{찾은상품.price}원</p>
  <button className="btn btn-danger" onClick={()=>{
    dispatch(addItem( {id : 1, name : 'Red Knit', count : 1} ))
  }}>주문하기</button>
  </div>
</div>

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.