[React] fetch함수

fetch 함수란?

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다.

 

백앤드로부터 데이터를 받아오면 API를 호출하고 데이터 응답을 받는데

이때 자바스크립트 fetch()함수를 사용하거나 axios 라이브러리를 사용한다.

브라우저에서 fetch()함수를 지원하기 이전에는 클라이언트 단에서 직접 HTTP 요청하고 응답받는게 상당히 복잡해서 이러한 라이브러리를 사용하는것이 합리적이였다.

하지만 요즘에는 오히려 라이브러리 사용하는 것이 자바스크립트 번들 파일의 크기만 늘려 낭비가 될 수 있으므로 브라우저에 내장된 fetch() 함수를 이용하여 사용한다고 한다.

 

 

fetch 사용법

 

fetch(url, [options])
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

 

url : 접근하고자 하는 URL, 

options : 선택 매개변수 (options에 아무것도 넘기지 않으면, GET 메서드로 진행되며 url로부터 콘텐츠가 다운로드 된다.

fetch()를 호출하게되면 브라우저는 네트워크로 요청을 보내고 프라미스가 반환된다.

반환된 객체는 API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고,

실패했을 경우에는 error 객체를 reject 한다.

 

 

GET 호출

JSON Placeholder 라는 인터넷에 공개된 API를 사용해서 코드를 작성해보았다.

fetch()함수는 default로 GET 방식이므로 옵션인자가 필요없다.

응답객체를 통해서 응답상태가 status:200 상태인것을 확인할 수 있다.

대부분 REST API들은 JSON 형태로 데이터를 응답하기 때문에 응답 객체는 json()메서드를 제공한다.

 

 

 

 

이 메서드를 호출하면, response 객체로부터 JSON 자바스크립트 객체로 변환하여 얻을 수 있다.

 

 

 

POST 호출

원격 API에서 관리하고 있는 데이터를 생성해야 한다면 요청 전문을 포함할 수 있는 POST 방식의 통신이 필요하다.

이번에는 POST로 호출했는데 응답코드가 status: 201인 것을 확인할 수 있다.

마찬가지로 응답 객체의 json() 메서드를 호출하면 응답 전문을 객체 형태로 응답 받는다.

 

 

 

<참고자료>

https://ko.javascript.info/fetch

fetch

 

https://www.daleseo.com/js-window-fetch/

[자바스크립트] fetch() 함수로 원격 API 호출하기