장바구니 | data 서버에 보내기 (서버 통신 후 수정하기)

장바구니에 있는 모든 상품들을 주문하기

input:
장바구니에 있는 모든 상품들을 선택했는가?
버튼이 작동하는지?
버튼을 누르면 선택 상품들을 서버로 보낸다.

output:
데이터 양식

1. 전체상품 주문 버튼에 onClick 이벤트를 만들어줍니다.

<button onClick={this.giveItemList}>전체상품주문</button>

2. giveItemList함수 만들기 (새로운 데이터 만들기)

함수를 만들기 전에, 우리는 버튼을 클릭하면 장바구니 안에 있는 Data들을 서버로 전달해 주어야한다는 점을 생각해볼 수 있습니다. (장바구니(나) -> 서버(득영님) -> 결제(종호님))

그럼 어떤 데이터들을 넘겨줘야 할까요?
이럴 때에는 결제창에서 어떤 data를 받아야 하는지를 보며 넘겨줄 데이터를 생각해볼 수 있습니다.

위의 사진은 도프트앤더프트의 장바구니

위의 사진은 결제 페이지의 주문상품 페이지 입니다.

두 상품에 있는 img, 가격 등은 서버에서 내용을 불러올 수 있습니다.
우리가 결제창에 전달해줄 요소는 바로 고객이 선택한 상품의 id와 수량 입니다.

• 서버에 전달해줄 새로운 data 배열 만들기

<script>
giveItemList = () => {
    // console.log('click'); 버튼이 작동하는지 확인
    let newOrderList = this.state.orderList.map(order => {
      return {
        id: order.id,
        count: order.count,
		};
	});
}
    //console.log(newOrderList);
</script>

1. 전송할 데이터의 배열을 만들어준다.
2. 고객이 선택한 전체 제품의 id와 수량을 map()을 이용하여 전달해준다. map할 배열 안의 객체는 id, count(수량)을 전달해준다.

3. giveItemList 서버에 전달하기.

<script>

    fetch('http://localhost:8000/carts', {
      method: 'POST',
      body: {
        orderList: newOrderList,
      },
    })
      .then(res => res.json())
      .then(data => {
        // { MESSAGE: SUCCESS } 와 같은 back에서 보내는 메세지가 뜨는 것
        console.log(data);
      });
  };
  
</script>

• fetch 함수를 만들고, POST 메서드를 사용하여 orderList에 새로 만든 newOrderList를 넣어주었습니다.
• 배운 점:
  POST는 처음 써봤는데, POST에도 .then(data => {console.log(data);}가 있어서 어떤 데이터를 log하는지 궁금했습니다. 그런데 알고보니 두번째 then의 console.log는 back에서 데이터를 전달받았을 때 성공했는지, 안했는지 등의 메세지를 정하여 보내주는 것을 말하는 것이었다.
  인스타그램 클론을 한 후 back과 로그인/회원가입 통신을 했을 때 사용했던 것이 생각났다.

---

🍒 data 전달 전체 코드 모아보기

<script>
class Basket extends Component {

constructor() {
    super();
    this.state = {
      orderList: [],
    };
  }
  
giveItemList = () => {
    let newOrderList = this.state.orderList.map(order => {
      return {
        id: order.id,
        count: order.count,
      };
    })
    console.log(newOrderList);
    fetch('http://10.5.30.109:8000/products/basket', {
      method: 'POST',
      body: {
        orderList: newOrderList,
      },
    })
      .then(res => res.json())
      .then(data => {
        console.log(data);
      });
  };
}
</script>