1번으로 작성했다가 2번으로 변경

1. 하나의 상태로 따로 관리(feat. useEffect)

const CartList = ({ carts, isLoading }: Props) => {
  // 선택된 장바구니 배열
  const [selectedCartItems, setSelectedCartItems] = useState<CartItem[]>([]); 
  // 장바구니 상품들 총액 
  const [expectedPrice, setExpectedPrice] = useState<number>(0); 

  // 장바구니 상품들의 총액을 구하는 함수 
  const calculateExpectedPrice = () => {
    const PRICE_WHEN_SELECTED_NOTHING = 0;

    return selectedCartItems.reduce(
      (acc, { product, quantity }) => acc + product.price * quantity,
      PRICE_WHEN_SELECTED_NOTHING,
    );

    // 선택된 장바구니 배열을 감시하다가 변경이 일어나면 총액을 관리하는 상태를 업데이트
    useEffect(() => {
      setSelectedCartItems(calculateExpectedPrice())
    }
    }, [selectedCartItems]);

    return (
      <div>선택된 아이템의 개수:{expectedPrice}</div>

  )

• 총액을 구하는 함수를 만들고(calculateExpectedPrice)

• 선택된 상품을 관리하는 상태인 selectedCartItems 의 변화를 감시하고 있는다

  → 그러다가 변경되면 금액을 계산해서 화면에 보여줄 expectedPrice set 해주고 → 화면에 expectedPrice 값을 보여줌

2. 상태 업데이트를 순수 함수를 통해서

const CartList = ({ carts, isLoading }: Props) => {
  const [selectedCartItems, setSelectedCartItems] = useState<CartItem[]>([]);
   
  // 파라미터로 장바구니 정보를 받고, 그 정보로 총액을 구하는 함수 
  const calculateExpectedPrice = (selectedCartItems: CartItem[]) => {
    const PRICE_WHEN_SELECTED_NOTHING = 0;

    return selectedCartItems.reduce(
      (acc, { product, quantity }) => acc + product.price * quantity,
      PRICE_WHEN_SELECTED_NOTHING,
    );
  }
   
  ....

  return (
      <div>선택된 아이템의 개수:{calculateExpectedPrice(selectedCartItems)}</div>

• 선택된 장바구니 배열을 파라미터로 받아서 → 파라미터로 받아온 장바구니 정보의 총 금액을 구하는 함수를 만들고
• react state로 관리하는 selectedCartItems(선택된 장바구니 정보)를 파라미터로 받아 계산된 결과를 리턴하는 함수로 보여줌

과정

처음에는 1번처럼 작성했다가 이 로직을 테스트하고 싶어졌다. 그러다가 2번의 형태로 바꾸게 되었다.

선택은? - 2번(상태 업데이트를 순수 함수를 통해서)

긍정적인 부분

• 이 값은 계산하는 로직이라 테스트가 있으면 좋을 것 같다. 그러기위해서는 순수 함수로 만들어 테스트하는 것이 더 좋지 않을까
• useEffect 로 혹시 모를 side-effect 제거(어떤 사이드 이팩트가 있을지 아직은 크게 생각나지 않는다..)