fetch 메소드를 사용한 데이터 통신

fetch 메소드를 사용하면 프론트에서 백으로 요청을 보낼 수 있다.

전달해줄 정보들을 state 에 담아놓고 있다가 호출하는 순간에 백엔드에 전달해준다.

유저가 입력을 완료한 순간 (submit 을 누른 순간에) fetch 호출이 실행된다.

componentDidMount = () => {
    console.log("componentDidMount");
    fetch("http://localhost:3000/shoplistrow.json")
      .then((res) => res.json())
      .then((result) => {
        this.setState({
          list: result,
        });
      });
  };

method: "POST"

바디에 정보를 담아서 보내줄건데 공통 프로토콜이 필요하니까 JSON 형태로

method:"GET"일 때는 정보를 가져올 것이므로 바디에는 다른 내용이 없어도 된다.

fetch 함수는 두개의 인자를 받는데 첫번째 인자로 API 주소,

두번째 인자로 객체 (header 랑 body로 구성된)를 받는다.

중요한 점은 백엔드와 key 값을 맞춰야 연결이 된다는 점!

body 안에 그쪽에서 기대하는 key값으로 보내야 연결이 되서 받을 수 있다.

어떤 데이터를 어떤 key값으로 보내고 받을것인지 통일하는것부터 하자.

**JSON.stringify()** → 자바스크립트를 제이슨으로 변환

**.json()** → 제이슨 바디를 자바스크립트로 변환

아래에서 POST 메소드를 위한
fetch 를 보자.

fetch("http://10.58.4.213:8000/account/signup", {
            method: "POST",
            body: JSON.stringify({
                email: this.state.userId,
                password: this.state.userPw,
            })
        })
        .then(res => res.json()) // JSON body 를 자바스크립트로 변환
        .then(res => console.log(res)) // 콘솔로 내가 원하는 정보가 잘 들어오는지 확인한 후, state 에 담는다.