[PROJECT-JULABO-React] setState

장바구니의 수량을 바꿀 때마다 바뀐 수량을 sessionStorage 에 저장하는 작업을 하던 도중 한 박자 늦게 반영되는 문제가 있었습니다.

const [quantity, setQuantity] = useState();

... 

const addQuantity = (e, id) => {
    e.preventDefault();

    const addQuan = cartItems?.map(cartItem => {
      if (cartItem.cart_id === id) {
       
        setQuantity(prev => prev + 1);
     
        return { ...cartItem, quantity: quantity. };
      } else return cartItem;
    });
    setCartItems(addQuan);
  };

우선 선택한 상품이 무엇인지 판별하는 조건문을 걸고 그 상품이 맞을 경우, setQuantity 함수를 통해 이전 수량값에 1을 더해주는 방법으로 수량을 늘렸습니다.
그리고 set을 통해 바뀐 값을 map 함수의 리턴문으로 보냈는데, 이렇게 할 경우 한박자 느리게 state 변경이 이루어지는 문제가 있었습니다.
이 문제는 setState 함수가 비동기적으로 동작하기 때문인데 코드상으로는 위에서 아래로 순차적으로 진행되는 것처럼 보이지만 비동기성으로 인해 곧바로 반영이 되지 않은 것 같습니다.

💡 궁금한 점은 처음에 증가버튼을 누를 시에만 한 박자 느리게 되고 2번째 증가부터는 잘 되었던 것 같은데 이 문제에 대해서도 찾아보아야 할 것 같습니다.

따라서 이 문제를 해결하기 위해 quantity 와 setQuantity를 한 함수 내에서 같이 쓰지 않고 quantity를 변수로 대체하는 방법을 적용했습니다.

const addQuantity = (e, id) => {
    e.preventDefault();

    const addQuan = cartItems?.map(cartItem => {
      if (cartItem.cart_id === id) {
        const curr = +quantity + 1;

        setQuantity(curr);

        return { ...cartItem, quantity: curr };
      } else return cartItem;
    });
    setCartItems(addQuan);
  };

이렇게 curr 이라는 변수를 선언해서 이 변수에 quantity에 +1 을 해줄 경우 잘 작동하게 됩니다.

setState에 대한 이해부족으로 생긴 문제로 훅에 대한 문서를 다시 한번 살펴보아야 할 것 같습니다.