카트->카드->수량조작 코드로 리팩토링 연습

import classes from './Card.module.css';

const Card = (props) => {
  return (
    <section
      className={`${classes.card} ${props.className ? props.className : ''}`}
    >
      {props.children}
    </section>
  );
};

export default Card;

이 컴포넌트는 children의 css스타일을 모두 동일하게 만들어주는 기능을 한다.

import { useSelector } from 'react-redux';

import Card from '../UI/Card';
import classes from './Cart.module.css';
import CartItem from './CartItem';

const Cart = (props) => { 
  const cartItems = useSelector(state=>state.cart.items);

  return (
    <Card className={classes.cart}>
      <h2>Your Shopping Cart</h2>
      <ul>
        {cartItems.map((item) => (
          <CartItem
          key={item.id}
          item={{ title: item.name,
          quantity: item.quantity, 
          total: item.totalPrice, 
          price: item.price }}
        />
        ))}
        
      </ul>
    </Card>
  );
};

export default Cart;

이 컴포넌트는 Card의 css를 가지고 CartItems을 자식으로 가지고 있으며
state.cart.items에서 받아온 아이템을 반복하여 화면에 랜더링해주는 부분을
담당하고 있다.

import { useDispatch } from 'react-redux';
import classes from './CartItem.module.css';
import { cartActions } from '../../store/cart-slice';

const CartItem = (props) => {
  const dispatch = useDispatch();

  const { title, quantity, total, price, id} = props.item;

  const removeItemHandler = () => {
    dispatch (cartActions.removeItemFromCart(id));
  }

  const addItemHandler = () => {
    dispatch (cartActions.addItemToCart({
      id,
      title,
      price,
      quantity
    }));
  }

  return (
    <li className={classes.item}>
      <header>
        <h3>{title}</h3>
        <div className={classes.price}>
          ${total.toFixed(2)}{' '}
          <span className={classes.itemprice}>(${price.toFixed(2)}/item)</span>
        </div>
      </header>
      <div className={classes.details}>
        <div className={classes.quantity}>
          x <span>{quantity}</span>
        </div>
        <div className={classes.actions}>
          <button onClick={removeItemHandler}>-</button>
          <button onClick={addItemHandler}>+</button>
        </div>
      </div>
    </li>
  );
};

export default CartItem;

이 컴포넌트는 부모컴포넌트인 cart에서 받은 'props.item'의 데이터를 구조분해 할당하여 title, quantity, total, price, id로 각각 추출하였다.
또한 이 컴포넌트의 주요한 기능은 상품의 갯수를 조절하는 핸들러도 가지고 있다.
cart에서는 mapping으로 랜더링이 되고 이 컴포넌트의 리턴 부분에 써준것이 화면에 보이는 부분이라는 것이 포인트인데 일단 가장 마지막 자식에서 실제로 그려질 페이지가 있다고 생각하면 덜 헷갈린 것 같다는 생각이든다.