1. fetch 란?

먼저 fetch의 사전적 의미를 보게되면 가져옴, 쭉 뻗어 어딘가에 있는 것을 가져오기 라는 뜻이있는데 이 의미에서도 유추할 수 있듯이 fetch는 api에 요청(request)을 보내고, 정보를 응답(response) 받을 수있게 해주는게 fetch함수이다.

2. fetch() 함수 사용법

2-1 fetch() 함수의 기본구조

fetch('api주소', {
  method: '...',
  headers: { 'key': 'value' },
  body: JSON.stringify({ 'key': 'value' }),
})                                      //요청
  .then((response) => response.json())
  .then((data) => console.log(data));
                                        //응답

fetch는 크게 요청과 응답 부분으로 나눌 수 있는데, 먼저 요청부분을 보게 되면 두 번째 인자로 전달하는 객체의 key 중에 자주 사용하는 method, headers, 그리고 body가 있는 요청과 body가 없는 요청으로 나눠서 볼 수 있다.

2-2첫번째 인자(api주소) - 필수

fetch() 첫 번째 인자 자리에 정보를 요청할 API 주소를 입력합니다. API 주소는 서버(백엔드)에서 받아야 합니다. API 주소는 http:// 혹은 https:// , IP 주소(with 포트 번호) 혹은 도메인 주소, 엔드 포인트로 구성돼있다.

fetch('http://10.58.113.116:8000/signin');

fetch('https://jsonplaceholder.typicode.com/posts');

2-3. 두번째 인자 (method) - 선택사항

어떤 method로 요청할지 입력한다.(GET, POST, PUT, PATCH, DELETE 등등) 먼저 GET과 POST의 예제를 보겠다.

2-3-1 POST

post인 경우에는 fetch()함수에 method 정보를 인자로 넘겨주어야 한다. 폼 등을 사용해서 데이터를 만들어 낼 때, 보내는 데이터의 양이 많거나, 비밀번호 등 개인정보를 보낼 때 POST 메서드를 사용한다. 새로운 포스트 생성 위해서는 method 옵션을 POST로 지정해주고, headers 옵션으로 JSON 포맷 사용한다고 알려줘야 한다. body 옵션에는 요청 전문을 JSON 포맷으로 넣어준다.
api가 get인지 post인지는 api를 개발한 백엔드 개발자에게 물어보아야 한다.

  const goToMain = () => {
    fetch('api 주소', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      body: JSON.stringify({
        account: userInfo.id,
        password: userInfo.pw,
      }),
    })

2-3-2 GET

fetch() 함수에서 default method는 get이다. 단순히 원격 API에 있는 데이터를 가져올 때 쓰임

useEffect(() => {
    fetch('api 주소', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    })
      .then(res => res.json())
      .then(data => {
        setOrderProduct(data);
      });
  }, []);

2-4 두번째 인자 (headers) - 선택사항

headers는 서버에 요청할 때 보낼 부가적인 정보를 담습니다. (Host, user-Agent, Authorization, Content-Type 등등)

  const goToMain = () => {
    fetch('api 주소', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      body: JSON.stringify({
        account: userInfo.id,
        password: userInfo.pw,
      }),
    })

2-5 두번째 인자 (body) - 선택사항

전달하고자 하는 응답 내용이다. 백과 통신할 때는 객체로 통신하기 떄문에 객체 타입으로 작성해야 한다. method, headers, body는 전달하고자 하는 정보에 대한 정보이기 때문에 정보를 가져올 때, 즉 get하는 경우에는 작성해 줄 필요는 없다. body에는 서버에 요청할 때 보낼 실질적인 정보를 담는데, 여기서 요청 body가 있는 경우와 없는 경우로 나눌 수 있다.

2-5-1 body 요청사항이 있는경우

//POST - body 예시

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  body: JSON.stringify({
    title: 'update title',
    content: '서버에 요청할때 담아서 보내는 정보',
  }),
});

• 왜 JSON 형태로 보내야 할까?
  통신 간, 서버와 클라이언트는 같은 언어일 수도 있고, 다른 언어일 수도 있다. 같은 언어라면 문제가 없겠지만 다른 언어라면 주고받을 수 없다. 하지만 JSON 형태라면 어떤 언어에서든 원하는 데이터를 주고받을 수 있다. JSON의 형태는 자바스크립트의 객체와 유사하지만, javascript가 아니더라도 JSON을 읽고 쓸 수 있는 기능이 대부분 언어에서 제공됩니다.

2-5-2 요청 body가 없는 경우

요청 body가 없는 경우는 서버에 전달해 줄 정보 없이 정보를 달라고 요청만 한다.

//body가 없는 요청 예시

fetch('https://jsonplaceholder.typicode.com/users/1', { method: 'GET' });

3. fetch 응답(response)

위의 fetch의 기본구조중 크게 요청, 응답으로 나눌수 있다고 말했다. 이번에는 응답부분에대해서 보도록 하겠다.

fetch('api주소', {
  method: '...',
  headers: { 'key': 'value' },
  body: JSON.stringify({ 'key': 'value' }),
})                                      //요청
  .then((response) => response.json())
  .then((data) => console.log(data));
                                        //응답

.then() 메서드는 Promise를 처리할 수 있는 메서드이다. .then()은 Promise를 return 하고 두 개의 콜백 함수를 인자로 받는다. 하나는 Promise가 이행됐을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. .then() 메서드는 Promise를 return 하기 때문에 첫 번째. then()에서 반환된 값을 두 번째. then()에 이어서 처리할 수 있는 메서드 체이닝(chaning)이 가능하다.

3-1 fetch()메서드 뒤에, Promise 메서드를 포함시킨다. then() :

fetch(url)
  .then(function() {
    // handle the response
  })

반환된 Promise가 resolve라면, then() 메서드 안쪽에 있는 function이 실행된다. 이 function은 API로부터 받은 데이터를 처리하기 위한 코드를 포함하고 있다.

3-2 then() 메서드 뒤에, catch() 메서드를 포함시킬 경우

fetch(url)
  .then(function() {
    // handle the response
  })
  .catch(function() {
    // handle the error
  });

fetch()를 사용해서 호출한 API가 중단되거나 다른 에러가 발생할 수 있다. 이럴 경우, reject promise가 반환된다. catch 메서드는 거부된 promise를 처리하는데 쓰인다. 우리가 선택한 API를 호출할 때 에러가 발생했을 경우, catch() 안의 코드가 실행된다.