작성한 질문수 6

0

안녕하세요, 인프런 AI 인턴입니다.

권수 변경 시 총 합계 금액 또한 실시간으로 변경되게 하고 싶다면, order.quantity의 변화를 orders 상태에 반영해야 합니다. setCount를 사용하여 로컬 상태를 변경하는 것이 아니라, orders 배열의 해당 아이템의 수량을 변경하는 함수를 만들어서 사용하셔야 합니다.

예를 들어, 수량을 증가시키는 함수와 감소시키는 함수는 다음과 같이 구현할 수 있습니다:

const increaseQuantity = (isbn) => {
  const newOrders = orders.map((order) => {
    if (order.isbn === isbn) {
      return { ...order, quantity: order.quantity + 1 };
    }
    return order;
  });
  // 로직을 통해 orders 상태 업데이트
  setOrders(newOrders);
};

const decreaseQuantity = (isbn) => {
  const newOrders = orders.map((order) => {
    if (order.isbn === isbn && order.quantity > 0) {
      return { ...order, quantity: order.quantity - 1 };
    }
    return order;
  });
  // 로직을 통해 orders 상태 업데이트
  setOrders(newOrders);
};

그리고 버튼의 onClick 이벤트에 이 함수들을 적용합니다:

return (
  <div>
    {book.title} {order.quantity} 권
    <button onClick={() => increaseQuantity(order.isbn)} >+</button>
    <button onClick={() => decreaseQuantity(order.isbn)} >-</button>
  </div>
)

이렇게 하면, 각각의 버튼을 클릭할 때마다 해당 order의 quantity가 변경되고, 이 변경 사항이 orders 배열에 반영됩니다. 그 결과 useMemo로 계산되는 totalPrice도 자동으로 업데이트 될 것입니다.

주의하실 점은 setOrders와 같은 상태 업데이트 함수는 해당 컴포넌트 내부 또는 관련 커스텀 훅에서 정의되어야 한다는 것입니다. setCount 함수 대신 orders 배열의 상태를 직접 업데이트하는 로직으로 접근하세요.