fetch 함수

오늘은 공부하다가 마주하게 된 fetch함수에 대해 간단히 노트해보려 한다.

배경

우리는 데이터를 주고받을 때, API를 통해 Back단에서 데이터를 처리한다.
이때, 우리는 리액트에서 이를 처리하기 위한 방법으로 크게 두가지가 있다.

1. axios 라이브러리
2. fetch() 함수 사용

우리는 axios 라이브러리 사용법은 이전 Chapter에서 배운 적이 있다.
그리고 이제 두번째 방법으로 오늘 배우려고 하는 fetch()가 존재하는 것이다.

실무상으로는 여러 이유로 axios를 사용한다고 하지만 fetch() 역시 대부분의 기능을 충분히 구현할 수 있는 역할을 한다고 한다.

기본 구조 및 사용 방법

기본적인 fetch() 구조를 알아보자.

let return = fetch(url, [options]);

• url: 접근 URL
• [options]: 선택 매개변수. method나 header 등 지정 가능

기본 구조는 위와 같고 실제로 자주 사용하는 템플릿은 아래와 같다.

• arrow 함수형

fetch('api주소')
  .then(res=>res.json())
  .then(res=>{
      // 응답 데이터(res)를 가지고 처리하는 로직
});  

• 함수 선언형

fetch('api주소')
   .then(
       function(res){
          return res.json());
       }
   .then(
       function(res){
           // 응답 데이터(res)를 가지고 처리하는 로직
       }
    );

리액트에서 함수를 다루는 방식은 위와 같이 두가지가 있으며 개인적으로는 arrow 함수형을 선호하는 편이다.

위 코드의 처리 방식은 아래와 같다고 볼 수 있다.

1. api 주소 접근
2. 응답 받은 데이터 형식 변환
3. 변환된 데이터 기반, 작업 진행

fetch() 함수 - method가 GET인 경우

기본적으로 fetch()함수는 default method가 GET이다.

default method가 GET이므로 fetch함수를 쓸 때,

fetch('api주소')
  .then(res=>res.json())
  .then(res=>{
      // 응답 데이터(res)를 가지고 처리하는 로직
});

다음과 같이 사용된다.

fetch() 함수 - method가 GET 이외의 경우 (POST,PUT,DELETE)

만약, GET이외의 경우는 어떠할까요?

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

POST로 예시를 들어보겠습니다.

GET일 경우, fetch()함수는 하나의 param(API url)만 사용했지만
그 외의 경우(POST,PUT,DELETE)일 경우, fetch()함수는 두개의 param(API URL,options) 을 모두 사용합니다.

• options 종류: method, body
• method: POST, PUT, DELETE
• body: 전달하는 형태 (JSON, text 등..)