152. 컨텍스트 사용

reduce() 메서드를 사용해서 배열 내 중복된 항목을 제거하고 난 개수를 알려준다

두 가지의 인수를 받는 데, 첫번째는 함수 두 번째는 값이다.

질문 CartProvider와 CartContext를 언제 다르게 사용해야 하는 지 차이를 모르겠다.

 

 

 

HeaderCartButton.js

import { useContext } from 'react';
import CartIcon from './CartIcon';
import CartContext from '../../store/cart-context';

import classes from './HeaderCartButton.module.css';
const HeaderCartButton = props => {
  const cartCtx = useContext(CartContext);
  const numberOfCartItems = cartCtx.items.reduce((curNo, item) => {
    return curNo + items.amount;
  }, 0);

  return <button className={classes.button} onClick={props.onClick}>
    <span className={classes.icon}>
      <CartIcon />
    </span>
    <span>Your Cart</span>
    <span className={classes.badge}>{numberOfCartItems}</span>
  </button>
}

export default HeaderCartButton;