리액트 장바구니 총 합계 금액 계산 함수 어떻게 해야할까요?

const Order = () => {
  const orders = useOrders();
  const { books } = useBooks();
  const { remove, removeAll, addToOrder } = useActions();
  const [count,setCount] = useState(1);
 const totalPrice =  useMemo(() => {
  
  return orders.map((order) => {
      const { isbn, quantity } = order;
      const book = books.find((b) => b.isbn === isbn);
      return book.sale_price * quantity ;
    })
    .reduce((l, r) => l + r, 0);
}, [orders, books]);

다른 컴포넌트와 hooks 에서 받아온 함수로 총액 계산을 하는데 (totalPrice)

해당 컴포넌트에서 아래처럼 권수를 변경할 수 있는 함수를 만들었습니다.

return(

{book.title} {order.quantity} 권 <button onClick={() => setCount(order.quantity ++)} >+</button> <button onClick={() => setCount(order.quantity --)} >-</button> </div>

)

여기서 변경된 권수의 금액으로 총액도 변경하게 하고 싶은데 어떻게 함수를 만들어야 할까요...?

안녕하세요, 인프런 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 배열의 상태를 직접 업데이트하는 로직으로 접근하세요.

인프런 커뮤니티 질문&답변