TIL | fetch()

fetch 함수 사용

벡엔드로부터 데이터를 받아오려면 api를

React에서 벡엔드로부터 fetch 함수를 이용해서 api를 받아올 때는 대체로 GET 방식과 POST 방식을 통해서 데이터를 받아온다.

일반적으로 GET 방식을 사용하고 회원정보와 같은 비밀정보는 POST방식을 통해서 전달하게 된다.

비밀정보를 주고받는데 GET 방식을 사용하지 않는 이유는 URL에 해당 정보가 노출되기 때문이다.

fetch("http://192.168.202.128:3000/data/productlist.json")
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          productInfo: res.product,
      });
});

fetch 함수는 기본적으로 이러한 형태로 이루어지게 된다.

윗줄부터 'api 주소'가 들어가고 첫번째 then을 통해서 Promise의 형태로 리턴된다. 다음 then을 통해서 response된 데이터를 this.setState를 통해서 해당하는 곳에 넣어준다.

method가 GET 인 경우

fetch()에서 default method는 GET이기 때문에 GET을 사용한다면 method의 형태를 명시해줄 필요가 없다.

그래서 비교적 간단하게 JSON으로 된 데이터를 받아올 수 있다.

method가 POST 인 경우

method가 POST인 경우에는 GET과는 다르게 fetch()에 인자로 method 정보를 명시 해줘야 한다.

fetch("http://192.168.202.128:3000/signup")
      method: 'post',
    body: JSON.stringify({
        name: "kim",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
});

body는 JSON 형태로 보내기 위해서 JSON.stringify() 함수에 객체를 인자로 전달해서 JSON 형태로 변환한다.