[06.21] 과제_Cmarket Hooks Review

과제 개요 & 목표

• useState를 이용해 상태를 사용하는 방법 알기
• Hooks를 이용해 상태 관리 해보기
• 쇼핑몰 애플리케이션의 주요 기능 구현
  • [장바구니 담기] 버튼을 이용해 상품 추가 기능
  • 장바구니 페이지에서 [삭제] 버튼을 이용해 장바구니의 상품 제거
  • 장바구니 페이지에서 아이템 수량 변경
  • 장바구니의 상품 개수 변동에 따른 상단 내비게이션 바에 상품 개수 업데이트

과제 구조(Feat.Figma)

• App.js에 있는 상태 값을 props로 필요로 하는 곳으로 내려줌

App.js

import React, { useState } from 'react';
import Nav from './components/Nav';
import ItemListContainer from './pages/ItemListContainer';
import './App.css';
import './variables.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ShoppingCart from './pages/ShoppingCart';
import { initialState } from './assets/state';

function App() {
// 아이템들의 내용
const [items, setItems] = useState(initialState.items);
// 장바구니에 있는 아이템들의 내용
// 초기값은 이미 장바구니에 담겨 있는 아이템들
// setCartItems : 장바구니에 추가 되어지는 상태 변경 함수
const [cartItems, setCartItems] = useState(initialState.cartItems);

return (
  <Router>  
    <Nav cartItems={cartItems}/>
    <Routes>
      {/* props로 넘겨주기 */}
      <Route path="/" element={<ItemListContainer items={items} cartItems={cartItems} setCartItems={setCartItems}/>} />
      {/* props로 넘겨주기 */}
      <Route
        path="/shoppingcart"
        element={<ShoppingCart cartItems={cartItems} items={items} setCartItems={setCartItems} />}
      />
    </Routes>
    <img
      id="logo_foot"
      src={`${process.env.PUBLIC_URL}/codestates-logo.png`}
      alt="logo_foot"
    />
  </Router>
);
}

export default App;

ItemListContainer.js

import React from 'react';
import Item from '../components/Item';
import CartItem from '../components/CartItem';

// item 컴포넌트에서 onclik을 했을때 아이템이 장바구니에 추가
// app.js에서 상태변경에 필요한 props를 전달 받음 
// setItems가 없는 이유는 아이템 컴포넌트는 해당 이벤트 함수에 영향을 미치지 않음
function ItemListContainer({ items, cartItems, setCartItems }) {
const handleClick = (e, id) => {
  // 상태값을 직접 건드리면 안되기 때문에 복사를 해와서 사용
  let newCartItem = [...cartItems]
  //findIndex : 조건을 만족 시키는 인덱스를 반환
  let sameId = cartItems.findIndex((el) => el.itemId === id)
  // 장바구니에 동일한 id가 없으면 수량만 늘려줘
  if(sameId !== -1) {
    // 현재 카트아이템(인데스)에 수량만 추가해
    newCartItem[sameId].quantity += 1
   // 그렇지 않으면 아이템과 양 모두 추가해줘 
    console.log(newCartItem)
  } else {
    setCartItems([...newCartItem, {"itemId": id, "quantity": 1}])
    console.log(newCartItem)
  } 
	
	// for문을 이용해서 구현한 내용
  // let newCartItem = {};
  // newCartItem.itemId = id;
  // newCartItem.quantity = 1;
  // for(let i = 0; i < cartItems.length; i++){
  //   if(cartItems[i].itemId === id){
  //     setCartItems([...cartItems])
  //     cartItems[i].quantity++
  //     console.log("현재",cartItems)
  //   }else{
  //     setCartItems([...cartItems, newCartItem])
  //     console.log(newCartItem)
  //   }
  // }
}
return (
  <div id="item-list-container">
    <div id="item-list-body">
      <div id="item-list-title">쓸모없는 선물 모음</div>
      {items.map((item, idx) => <Item item={item} key={idx} 
      handleClick={handleClick} />)}
    </div>
  </div>
);
}

export default ItemListContainer;

ShoppingCart.js

📍 새로 알게 된 내용

• findIndex메서드
  • 조건을 만족하는 배열의 첫번째 요소의 인데스를 반환함
  • 조건을 만족하는 요소가 없다면 -1을 리턴함

[전체코드]

...생략
`
  const handleQuantityChange = (quantity, itemId) => {
  let newCartItem = [...cartItems]
  let sameId = cartItems.findIndex((el) => el.itemId === itemId)
  // 특정 인덱스에 접근하기 위해 [sameId] 사용
  newCartItem[sameId].quantity = quantity
  setCartItems(newCartItem)
}

const handleDelete = (itemId) => {
  setCartItems(cartItems.filter((el) => el.itemId !== itemId))
}

...생략