148. "장바구니" 컴포넌트 작업하기

해당 강의에서는 장바구니 모달 창을 만들 것이다 

React Portal을 이용해서 먼저 만들어보기 !  

 

Cart.js

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

const Cart = props => {
  const cartItems = (
    <ul className={classes['cart-items']}>
      {[
        { id: 'c1', name: 'Sushi', amount: 2, price: 12.99 }
      ].map((item) => <li>{item.name}</li>)}
    </ul>
  )
  return <div>
    {cartItems}
    <div className={classes.total}>
      <span>Total Amount</span>
      <span>30.33</span>
    </div>
    <div className={classes.actions}>
      <button className={classes['button-alt']}></button>
      <button className={classes.button}></button>
    </div>
  </div>
}

export default Cart;