# 154 [udemy React 완벽 가이드 노트] 장바구니 항목 출력해보기

 

장바구니 항목을 출력하려면

cart 컴포넌트에서 컨텍스트를 사용한다. 

---

 

1) useContext를 호출하고 거기에 CartContext를 전달한다. 

 

context에 접근하기 위해서다.

const Cart = props => {
  const cartCtx = useContext(CartContext);

그리고 cartCtx.items가 출력되도록 cartItems를 수정한다. 

 

const cartItems = (
    <ul className={classes["cart-items"]}>
      {cartCtx.items.map(item => (

 

 

 

 

2) cartItems가 제대로된 모습을 갖도록 해보자 

 

 

totalAmount를 실제로 보이도록하고 

hasItems로 item이 있으면 order버튼이 생기도록 한다. 

 

 

  const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`;
  const hasItems = cartCtx.items.length > 0;
  const onClickOpen = () => {
    props.onClickOpen(false);
  };

 

return (
    <Modal onClickOpen={props.onClickOpen}>
      {cartItems}
      <div className={classes.total}>
        <span>Total Amount</span>
        <span>{totalAmount}</span>
      </div>
      <div className={classes.actions}>
        <button className={classes["button--alt"]} onClick={onClickOpen}>
          Close
        </button>
        {hasItems && <button className={classes.button}>Order</button>}
      </div>
    </Modal>
  );

 

 

3) CartItems 컴포넌트 작성 후 cartItems에 렌더링해준다.

CartItems에 프롭으로 줄 cartItemRemoveHandler와 cartItemAddHandler를 만들어 

프롭으로 넣어준다. 

 

이 함수에 bind를 해준다 

*bind를 하면 추가되거나 삭제된 항목의 id가 removeHandler로 전달된다. 

bind는 함수를 향수 실행을 위해 사전에 구성한다. 

함수가 실행될 때 받을 인수를 미리 구성한다.   

 

 

const cartItems = (
    <ul className={classes["cart-items"]}>
      {cartCtx.items.map(item => (
        <CartItem
          key={item.id}
          name={item.name}
          amount={item.amount}
          price={item.price}
          onRemove={cartItemRemoveHandler.bind(null, item.id)}
          onAdd={cartItemAddHandler.bind(null, item.id)}
        />
      ))}

 

 이제 CartItem컴포넌트를 수정해보자.