[React] 1차 프로젝트 장바구니 페이지 2편

1편에 이어서 작성합니다. (1편 : 장바구니 페이지에 대한 요약, 중요하다고 생각한 점, 체크박스 설명)
2편에서는 수량변경, 서버와의 통신, 느낀점을 작성합니다.

수량변경, 서버와의 통신

1. 수량변경

const handleCount = id => {
 	setQuantityChange(quantity.current.value);
};

useEffect(() => {
	fetch(CART_API, {
     	method: 'PATCH',
      	headers: {
        	'Content-Type':'application/json;charset=utf-8',
        	authorization: token,
      	},
      	body: JSON.stringify({
       		foodId: id,
        	quantity: quantityChange,
      	}),
    });
}, [quantityChange]);

수량을 변경하고 변경된 수량을 서버에 전송합니다. 서버에 변경된 수량이 전송되면 수량 데이터가 업데이트 되고 업데이트 된 값으로 리렌더링 됩니다.
사용자의 동작으로 인해 변경된 데이터를 먼저 UI에 반영한 후 변경사항을 서버에 전송하는 방법과 데이터를 서버에 전송하고 리렌더링하는 방법 중 어떤 것이 맞는건지 모르겠다.

2. 서버와의 통신

• 2-1. 데이터 받을 때

useEffect(() => {
  	fetch(`${CART_API}/cart`, {
    	method: 'GET',
      	headers: {
        	authorization: token,
      	},
    })
   	.then(res => res.json())
    .then(data => {
        setCartList(data);
    });
}, [token, checkItems]);

• 2-2. 데이터 전달 할 떄

수량변경 할 때

const handleCount = id => {
 	setQuantityChange(selectQuantity.current.value);
    fetch(CART_API, {
   		method: 'PATCH',
      	headers: {
        	'Content-Type': 'application/json;charset=utf-8',
        	authorization: token,
      	},
      	body: JSON.stringify({
        	foodId: id,
        	quantity: quantityChange,
      	}),
   });
};

결제페이지에 구매하려는 제품목록 전달 할 때

const goToPaymentPage = () => {
	fetch(`${PAYMENT_API}/checkout?foodId=${checkItems.join(',')}`, {
     	method: 'GET',
      	headers: {
         	'Content-Type': 'application/json;charset=utf-8',
           	authorization: token,
        },
   	});
	navigate(`/payments/checkout?foodId=${checkItems.join(',')}`);
};

데이터를 받을 때 토큰을 통해 자격이 있는지 확인하고 받는다.

데이터를 전달할 때는 쿼리문(?foodId=${checkItems.join(',')) 또는 body(body: JSON.stringify({
foodId: id,
quantity: quantityChange,
})를 통해 전달할 데이터를 담아서 보낸다.

느낀점

서버와 통신하기 전에는 단순하게 작성한 코드에서 틀린점이 있는지 확인하는 작업만 하면 됐는데 서버의 데이터를 주고받으면서 서버와의 규칙 그리고 데이터에 따른 렌더링 과정을 고려해야 하니 생각할게 많아졌다. 다음에 통신할 때는 코드작성보다 구조파악에 중점을 둬야 겠다.