장바구니 수량 증가 감소 기존 코드
const handleIncrease = (increaseItem) => {
setCartItem((prev) =>
prev.map((item) =>
item.id === increaseItem.id
? { ...item, quantity: item.quantity + 1 }
: item
)
);
};
const handleDecrease = (decreaseItem) => {
setCartItem((prev) =>
prev.map((i) =>
i.id === decreaseItem.id && decreaseItem.quantity > 1
? { ...i, quantity: i.quantity - 1 }
: i
)
);
};
기존에는 각 버튼마다 같은 다를 함수를 사용하여 기능을 구현하였다 하지만
코드가 결국 같은 기능을 구현한다고 생각이 들어서 수정을 하게 되었다.
수량 증감 수정 코드
<div className="quantity-update-btn">
<p>
선택 수량: {item.quantity}
<button onClick={() => updateQuantity(item, 1)}>
<FontAwesomeIcon
icon={faPlus}
className="faMinus-icon"
/>
</button>
<button onClick={() => updateQuantity(item, -1)}>
<FontAwesomeIcon
icon={faMinus}
className="faMinus-icon"
/>
</button>
</p>
const handleQuantityUpdate = (item, delta) => {
setCartItem((prev) =>
prev.map((i) => {
const isBool = i.id === item.id;
if (!isBool) return i;
const newQuantity = i.quantity + delta;
if (newQuantity > 10) {
console.log("alert 호출 - 최소 수량 미만");
window.alert("최대 구매 갯수는 10개 입니다.");
return i;
}
if (newQuantity < 1) {
return i;
}
return { ...i, quantity: newQuantity };
})
);
};
const isBool = i.id === item.id;
if (!isBool) return i;
기존 장바구니 배열을 순회하면서 item.id와 일치하는 상품 수량을 바꾼다.
현재 순회 중인 상품 i가 업데이트하려는 상품 item과 id가 다르면 그대로 반환
const newQuantity = i.quantity + delta;
기존 수량에 delta를 더해서 새 수량을 구한다.
if (newQuantity > 10) {
console.log("alert 호출 - 최소 수량 미만");
window.alert("최대 구매 갯수는 10개 입니다.");
return i;
}
if (newQuantity < 1) {
return i;
}
최대 수량과 최소 수량을 정한다.
수량에 아무 문제가 없다면
return { ...i, quantity: newQuantity };
수량을 업데이트한다.