[React] 👟상품 추가하기 기능 구현

기능

Detail(상품정보 페이지)에서 주문하기 버튼 클릭 시 Cart(장바구니 페이지)에 해당 상품이 추가되는 기능

Redux 사용

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

전체 코드

//store.jsx

import { configureStore, createSlice } from "@reduxjs/toolkit";

const cart = createSlice({
  name: "cart",
  initialState: [ // 기본값으로 보여질 데이터들
    { id: 0, name: "White and Black", count: 2 }, 
    { id: 2, name: "Grey Yordan", count: 1 },
  ],
  reducers: {
 addItem(state, action) {
    const sameNumber = state.filter(num => {
        return num.id === action.payload.id; 
      });
     if (sameNumber.length) {
        alert("동일한 상품이 있습니다");
      } else {
        state.push(action.payload);
      }
    },
  },
});

export const { addItem } = cart.actions; // addItem 내보내기

export default configureStore({
  reducer: {
 cart: cart.reducer,
  },
});

기존 state와 action.payload.id 값을 비교해서 같은 값을 반환한다. 반환한 값의 길이에 똑같은 상품이 있다면 동일한 상품이 있다고 알림창을 띄우고 그게 아니라면 상품 데이터를 추가하는 기능이다

// Detail.jsx

const Detail = ({ shoes }) => {
  const { id } = useParams();
  const products = shoes.find((product) => product.id === parseInt(id));
  const dispatch = useDispatch();

  return(
  <div>
   <button
    className="btn btn-danger"
    onClick={() => {
     dispatch(
      addItem({
       id: products.id,
       name: products.title,
       count: 1,
       })
      );
     }}
    >
    주문하기
  </button>
 </div>
 );
};

export default Detail;

• 다른 코드를 생략하고 상품추가 기능만 보자면 주문하기 버튼을 클릭했을 때 id값, 상품명, 수량이 장바구니 페이지에 추가가 되어야 한다. 위에 코드는 객체 형태로 맞게 쓴 거기 때문에 화면에서 잘 작동하지만 코드를 작성할 때 문제가 있었다. 아래 코드를 보면 알 수 있다

⚠️ 문제 해결

<button
  className="btn btn-danger"
  onClick={() => {
    dispatch(
      addItem({ //바로 실행되지 않음. store.jsx 파일에 요청
        `id: ${products.id},
        name: ${products.title},
        count: 1,`
      })
    );
  }}
>
  주문하기
</button>;

• addItem 함수로 보낸 데이터가 Templeate Literal 방법인 문자열이었다. 그렇기 때문에 객체로 데이터를 보내야지 const sameNumber = state.filter(num => { return num.id === action.payload.id; }); 이 코드처럼 filter메서드를 사용해서 비교가 가능해진다. 즉 나는 aciton.payload.id를 state랑 비교한 게 아니라 문자열 id를 비교했기 때문에 장바구니 페이지에 해당 상품내역이 렌더링 되지 않았던 것이다

출처

코딩애플 리액트