Doodream
48
2021-04-15 17:50:52
1
67

[React] useState 상태변수 변경시 변수 설정이 이상해집니다.


const addToCart = () => {
console.log("addToCart");
var newCart = cart;
setProduct({
...product,
quantity: product.quantity + 1
})
// 카트가 비었는지 비어있지 않은지
if (cart !== null) {
//카트가 비어있지 않다면 product가 있는지 없는지
const itemIndex = cart.findIndex(item => item.id === product.id);
if (itemIndex === -1) {
setCart(cart.concat(product));
message.success("Add to Cart Success! 🧺")
} else {
newCart[itemIndex] = product;
setCart(newCart);
}
} else {
setCart([product]);
message.success("Add to Cart Success! 🧺")
}

}

위 코드에서 볼수 있다시피 setProduct를 먼저 해서 quantity를 1 늘렸습니다.
이후 setCart로 해당 product를 반영하는데요, 바뀌어진 product가 반영이 안됩니다.

예를 들어서 product.quantity가 0인 초기 상태에서 addToCart를 하면
cart에는 quantity가 1이 아니라 0으로 들어갑니다.

왜그럴까요 ? 새로운 Promise함수로 비동기 처리를 해야 할까요?
0
  • 답변 1

  • Doodream
    48
    2021-04-15 18:20:08

    해결 했습니다. useState()함수는 비동기 함수로서 리 랜더링이 발생할 시 해당 값이 반영이 되는군요

  • 로그인을 하시면 답변을 등록할 수 있습니다.