S3) Unit 4. [실습] CMarket Hooks

📣  장바구니 구현하기

✔️ 장바구니에 추가 및 상품 개수 업데이트

1. 메인 화면에서 '장바구니 담기' 버튼을 누른 후, 장바구니 페이지로 이동하면 상품이 담겨있어야 한다.

➡️ ItemListContainer.js

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

function ItemListContainer({ items, cartItems, setCartItems }) {
  const handleClick = (e, id) => { 
    let addItem = {
      itemId: id,
      quantity: 1,
    }

    for(let i=0; i<cartItems.length; i++){
      if(id === cartItems[i].itemId) cartItems[i].quantity++; // 이미 장바구니에 있으면 개수 증가
      else setCartItems([...cartItems, addItem]); // 없으면 그 아이템 자체를 담아주기
    }
  }
  
  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;

➰ App.js에서 items, cartItems, setCartItems state를 props로 받아온다.

➰ 받아온 id와 수량을 속성으로 가지는 장바구니에 추가 할 새 객체를 선언한다.

➰ cartItems 은 장바구니 아이템 목록을 의미하며, 이 배열을 for문으로 돌면서 확인한다.

➰ 만약 id가 장바구니에 있는 아이템 id와 같다면 이미 장바구니에 있는 아이템이므로 새로 추가하지 않고 수량만 증가시켜준다.

➰ id가 없다면, 그 아이템은 장바구니에 없는 것이므로 아까 선언한 새 객체와 원래 장바구니에 담긴 아이템을 새 배열로 만들어서 cartItems를 갱신해준다.

 

2. 장바구니 페이지에서 각 아이템의 개수를 변경할 수 있어야 한다.

➡️ ShoppingCart.js

import React, { useState } from 'react'
import CartItem from '../components/CartItem'
import OrderSummary from '../components/OrderSummary'

export default function ShoppingCart({ items, cartItems, setCartItems }) {
  const [checkedItems, setCheckedItems] = useState(cartItems.map((el) => el.itemId))

  const handleCheckChange = (checked, id) => {
    if (checked) {
      setCheckedItems([...checkedItems, id]);
    }
    else {
      setCheckedItems(checkedItems.filter((el) => el !== id));
    }
  };

  const handleAllCheck = (checked) => {
    if (checked) {
      setCheckedItems(cartItems.map((el) => el.itemId))
    }
    else {
      setCheckedItems([]);
    }
  };

  const handleQuantityChange = (quantity, itemId) => {
    let newCartItems = [...cartItems];
    for(let i=0; i<newCartItems.length; i++){
      if(newCartItems[i].itemId === itemId){
        newCartItems[i].quantity = quantity;
        //console.log(quantity);
        setCartItems(newCartItems);
      }
    }
  }

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

  const getTotal = () => {
    let cartIdArr = cartItems.map((el) => el.itemId)
    let total = {
      price: 0,
      quantity: 0,
    }
    for (let i = 0; i < cartIdArr.length; i++) {
      if (checkedItems.indexOf(cartIdArr[i]) > -1) {
        let quantity = cartItems[i].quantity
        let price = items.filter((el) => el.id === cartItems[i].itemId)[0].price

        total.price = total.price + quantity * price
        total.quantity = total.quantity + quantity
      }
    }
    return total
  }

  const renderItems = items.filter((el) => cartItems.map((el) => el.itemId).indexOf(el.id) > -1)
  const total = getTotal()

  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">장바구니</div>
        <span id="shopping-cart-select-all">
          <input
            type="checkbox"
            checked={
              checkedItems.length === cartItems.length ? true : false
            }
            onChange={(e) => handleAllCheck(e.target.checked)} >
          </input>
          <label >전체선택</label>
        </span>
        <div id="shopping-cart-container">
          {!cartItems.length ? (
            <div id="item-list-text">
              장바구니에 아이템이 없습니다.
            </div>
          ) : (
              <div id="cart-item-list">
                {renderItems.map((item, idx) => {
                  const quantity = cartItems.filter(el => el.itemId === item.id)[0].quantity
                  return <CartItem
                    key={idx}
                    handleCheckChange={handleCheckChange}
                    handleQuantityChange={handleQuantityChange}
                    handleDelete={handleDelete}
                    item={item}
                    checkedItems={checkedItems}
                    quantity={quantity}
                  />
                })}
              </div>
            )}
          <OrderSummary total={total.price} totalQty={total.quantity} />
        </div>
      </div >
    </div>
  )
}

➰ 수량 변경은 handleQuantityChange 함수에서 구현한다.

➰ state를 변경해야 하기 때문에 기존의 cartItems를 깊은 복사로 가져온다.

➰ 복사한 배열을 돌면서, 클릭한 id와 같은 id의 아이템을 만나면 그 아이템의 quantity를 ++ 해준다.

➰ cartItems를 복사한 새 배열로 갱신해준다.

 

3. 내비게이션 바에 상품 개수가 즉시 표시되어야 한다.

➡️ Nav.js

import React from 'react';
import { Link } from 'react-router-dom';

function Nav({cartItems}) {

  return (
    <div id="nav-body">
      <span id="title">
        <img id="logo" src="../logo.png" alt="logo" />
        <span id="name">CMarket</span>
      </span>
      <div id="menu">
        <Link to="/">상품리스트</Link>
        <Link to="/shoppingcart">
          장바구니<span id="nav-item-counter">{cartItems.length}</span>
        </Link>
      </div>
    </div>
  );
}

export default Nav;

➰ props로 받아온 cartItems의 길이를 출력해준다.

 

✔️ 장바구니로부터 제거

1. 장바구니 페이지에서 '삭제' 버튼을 누르면 해당 상품이 목록에서 삭제되어야 한다.

➡️ ShoppingCart.js

import React, { useState } from 'react'
import CartItem from '../components/CartItem'
import OrderSummary from '../components/OrderSummary'

export default function ShoppingCart({ items, cartItems, setCartItems }) {
  const [checkedItems, setCheckedItems] = useState(cartItems.map((el) => el.itemId))

  const handleCheckChange = (checked, id) => {
    if (checked) {
      setCheckedItems([...checkedItems, id]);
    }
    else {
      setCheckedItems(checkedItems.filter((el) => el !== id));
    }
  };

  const handleAllCheck = (checked) => {
    if (checked) {
      setCheckedItems(cartItems.map((el) => el.itemId))
    }
    else {
      setCheckedItems([]);
    }
  };

  const handleQuantityChange = (quantity, itemId) => {
    let newCartItems = [...cartItems];
    for(let i=0; i<newCartItems.length; i++){
      if(newCartItems[i].itemId === itemId){
        newCartItems[i].quantity = quantity;
        //console.log(quantity);
        setCartItems(newCartItems);
      }
    }
  }

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

  const getTotal = () => {
    let cartIdArr = cartItems.map((el) => el.itemId)
    let total = {
      price: 0,
      quantity: 0,
    }
    for (let i = 0; i < cartIdArr.length; i++) {
      if (checkedItems.indexOf(cartIdArr[i]) > -1) {
        let quantity = cartItems[i].quantity
        let price = items.filter((el) => el.id === cartItems[i].itemId)[0].price

        total.price = total.price + quantity * price
        total.quantity = total.quantity + quantity
      }
    }
    return total
  }

  const renderItems = items.filter((el) => cartItems.map((el) => el.itemId).indexOf(el.id) > -1)
  const total = getTotal()

  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">장바구니</div>
        <span id="shopping-cart-select-all">
          <input
            type="checkbox"
            checked={
              checkedItems.length === cartItems.length ? true : false
            }
            onChange={(e) => handleAllCheck(e.target.checked)} >
          </input>
          <label >전체선택</label>
        </span>
        <div id="shopping-cart-container">
          {!cartItems.length ? (
            <div id="item-list-text">
              장바구니에 아이템이 없습니다.
            </div>
          ) : (
              <div id="cart-item-list">
                {renderItems.map((item, idx) => {
                  const quantity = cartItems.filter(el => el.itemId === item.id)[0].quantity
                  return <CartItem
                    key={idx}
                    handleCheckChange={handleCheckChange}
                    handleQuantityChange={handleQuantityChange}
                    handleDelete={handleDelete}
                    item={item}
                    checkedItems={checkedItems}
                    quantity={quantity}
                  />
                })}
              </div>
            )}
          <OrderSummary total={total.price} totalQty={total.quantity} />
        </div>
      </div >
    </div>
  )
}

➰ 아이템 삭제는 handleDelete 함수에서 구현한다.

➰ cartItems에 filter를 실행해서, 클릭한 id와 id가 같은 아이템은 제외해준다.

 

2. 내비게이션 바에 상품 개수가 즉시 표시되어야 한다.

➰ 위의 3번과 같다.

 

📣  시연 화면