[React] fetch함수

🐦 fetch()

백앤드로부터 데이터를 받아오려면 API를 호출하고 데이터를 응답받는다. 이때 자바스크립트 Web API fetch()함수를 쓰거나 axios라이브러리를 사용할 수 있다.
Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수라고 생각하면 된다. 실무에서는 이런저런 이유로 axios를 많이 사용하지만, fetch함수로도 어지간한 기능 구현이 가능하다. 

🐔 fetch() 함수 기본

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

이것은 fetch함수의 기본 형태이다. 각 단계가 뭘 뜻하는지 명확히 알아야 한다.
이것을 ES5 함수 선언식으로 바꿔보면

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

이렇게 나온다. 변수의 scope는 각 함수이므로 첫 번째 then이랑 두 번째 then안에 있는 res는 서로 다른 것이다.
! res는 response의 줄임말이다.

🐤 fetch() 함수 - method가 get인 경우

fetch()함수에서 default method는 get이다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

위와 같은 API명세를 보고 어떻게 fetch()를 사용하면 될까?

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

API주소를 보니 user뒤에 있는 3이 user id인것 같다. 고정된 API라면 그냥 자바스크립트 코드에서도 고정해서 사용하면 되지만 API주소를 상황에 맞게 유동적으로 바꿔줘야 할 때가 아주 많다.

리액트에서 사용한다고 하면

import React, { useEffect } from 'react';

function User(props) {
  useEffect(() => {
      const { userId } = props;
	    fetch(`https://api.google.com/user/${userId}`)
	      .then(res => res.json())
	      .then(res => {
	        if (res.success) {
	            console.log(`${res.user.name}` 님 환영합니다);
	        }
	    });      
    }, []);
  ...
}

이렇게 사용할 수 있다.

🐺 fetch() 함수 - method가 post인 경우

fetch()기본은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출했는데, post인 경우에는 fetch()함수에 method 정보를 인자로 넘겨줘야 한다.
만약 api가 get인지 post인지 모르면 백앤드 개발자에게 물어봐야 한다. api정보를 아는 것은 오로지 그것을 만든 개발자뿐이다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    {
        "success": boolean
    }

위와같은 명세를 받으면

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("저장 완료");
    }
  })

이렇게 구현한다.
get method로 호출하는 것보다 복잡한거 같다.
1. 두 번째 인자에 method와 body를 보내줘야 한다.
2. method는 post
3. body는 JSON형태로 보내기 위해JSON.stringfy()함수에 객체를 인자로 전달하여 JSON형태로 변환했다.

fetch함수는 post로 데이터를 보낼 때 JSON.stringfy를 해줘야 하는 반면에 axios는 객체를 그대로 작성해도 되는 장점이 있다. axios는 소소한 편의성을 제공해주고 요처오가 응답에 대한 확장성있는 기능을 만들 수 있다.

🐗 fetch() 함수 - method가 get인데 parameter를 전달해야 하는 경우

path말 query string으로 넘겨줘야 하는 상황이 있을 수도 있다. 언제는 path, 언제는 query string으로 할 수 있다는 말이 아니라 예시니까 같은 API를 씀...
실제로는 데이터 전달 방식 또한 백앤드개발자에게 물어봐야한다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

특별한 것은 없고, API주소뒤에 붙여주면 된다.

fetch('https://api.google.com/user?id=3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

🐴 fetch() 함수 - res.json()의 의미

앞의 코드에서 첫 번째 then에서 res => res.json()이 뭐였을까?

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

이걸 이해하려면 우선 promise의 개념을 알아야 하지만 너무 길어지니까 생략하겠다.
대충 뜻만 알아보자!
첫 번재 then의 res가 어떤 값이 들어오길래 res.json()을 리턴하는가? console.log찍어보면 알겠지 뭐...
근데 콘솔을 찍어 보려면 return하는 화살표 함수에 바디를 다시 만들어줘야 한다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {       // 첫 번째 then
    console.log(res);  // 어떤 값이 나오는지 확인해보자. 실제 잘 작동하는 api 주소가 필요하다.

    return res.json();
  })
  .then(res => {       // 두 번째 then
    if (res.success) {
        alert("저장 완료");
    }
  })

첫 번째 then함수에 전달된 인자 res는 http통신 요청과 응답에서 응답의 정보를 담고 있는 객체로 Response Object라고 한다.
여기서 콘솔을 확인해보면 백앤드에서 넘겨주는 응답 body 즉, 실제데이터는 보이지 않는다. 그말은 {success: true}라는 JSON데이터는 위의 코드로는 콘솔에 안찍힌다는 말이다.
응답으로 받은 JSON데이터를 사용하려면 Response Object의 json함수를 호출하고, return해야 한다. 그러면 두 번재 then함수에서 응답 body의 데이터를 받을 수 있다.

🦄 fetch() 함수 - 첫 번째 then 함수에 추가되는 로직

그렇다면 fetch().then().then() 형태만 기억하면 될 것을 구구절절 설명해봤다.
어차피 알고 있어야 하는 부분이였고, 바로 백앤드에서 응답body를 안주는 경우도 많기 때문이다.
응답body로 JSON데이터를 주지 않는데 프론트에서 Response Object의 json()을 호출하면 에러가 난다.
예시를 들면

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    1. 제대로 저장했으면 status code를 200 전달. 응답 body는 없음
    2. 권한 오류가 생기면 status code를 403으로 전달하고. 응답 body는 아래와 같음
        {
            success: false,
            message: "권한이 없습니다"
        }

이 코드를 fetch()로 구현해보면

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

이렇게 만들 수 있다.