@jwroid
import React from 'react';
import { useState } from 'react';
export const CART_HISTORY = [
{
cartId: '1',
seller: {
sellerId: '3',
name: '미미',
thumbnail: 'https://dimg.donga.com/ugc/CDB/WEEKLY/Article/5f/22/2d/58/5f222d580749d2738de6.jpg',
},
products: [
{
id: '1',
brand_name: 'CITY BOY',
description: '코튼 와이드 팬츠',
image: 'https://image.msscdn.net/images/goods_img/20201014/1648073/1648073_3_500.jpg',
option: '옵션: 코튼 와이드 팬츠 / XS ',
count: '1',
price: '90,000원',
ship_price: '3,000원',
member_price: '- 45,000원',
},
{
id: '2',
brand_name: 'CITY 패딩',
description: '따뜻한 패딩',
image: 'https://image.msscdn.net/images/goods_img/20220708/2653637/2653637_3_500.jpg',
option: '옵션: 코튼 와이드 패딩2 / XS ',
count: '2',
ship_price: '3,000원',
price: '50,000원',
member_price: '- 25,000원',
},
],
ship_price: '3,000원',
total_price: '140,000원',
},
{
cartId: '2',
seller: {
sellerId: '5',
name: '동석',
thumbnail: 'https://img.hankyung.com/photo/201811/01.18271154.1.jpg',
},
products: [
{
id: '3',
brand_name: 'nike',
description: 'nike 반바지',
image: 'https://image.msscdn.net/images/prd_img/20190404/1005314/detail_1005314_1_500.jpg?t=20190404152622',
option: '옵션: 반바지 / XL ',
count: '4',
ship_price: '3,000원',
price: '20,000원',
member_price: '- 10,000원',
},
],
ship_price: '3,000원',
total_price: '20,000원',
},
];
function Test() {
const [newArray, setNewArray] = useState(CART_HISTORY);
const plus = () => {
setNewArray((prev) =>
prev.map((cart) =>
cart.cartId === '1'
? {
...cart,
products: cart.products.map((product) =>
product.id === '1' ? { ...product, count: `${Number(product.count) + 1}` } : product
),
}
: cart
)
);
console.log('카운트가 상승한 배열', newArray);
};
return <button onClick={plus}>누르면 count가 +1되는 버튼</button>;
}
export default Test;
cartId가 1이고 productId가 1인 경우에 count가 증가하도록 하드 코딩 했습니다. 실제로 업무를 하실때는 (cart.cartId === 유저가 클릭한 카트의 id) (product.id === 유저가 선택한 product id) 같은 식으로 조건을 적으시면 될 것 같습니다.
배열에 count가 문자열로 주어져 있어서 숫자로 변환 후 계산하고 다시 문자열로 바꿔주는 처리를 했는데 ${Number(product.count) + 1} (자바스크립트라면 별 상관없을 것 같지만 타입스크립트를 사용하신다고 가정하고) 애초에 count의 타입은 number인 게 더 효율적일 것 같습니다.