[React] fetch()

Using fetch()

출처: MDN
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다.

Fetch의 기본 스펙은 jQuery.ajax()와 기본적으로 두 가지가 다르다는 사실에 유념해야 한다.

• fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject 하지 않는다.
  (HTTP Status Code가 404나 500을 반환하더라도) 대신 ok 상태가 false인 resolve가 반환되며,
  네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.

• 보통 fetch는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야하는 경우
  인증되지 않는 요청이 발생한다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 한다.(토큰인듯)

코드 예시

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

네트워크에서 JSON 파일을 가져와서 콘솔에 인쇄한다. 간단한 fetch() 사용 흐름은 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속(Response 개체)을 반환하는 것이다.
이것은 단순한 HTTP Response이며, 실제 JSON이 아니다. response 객체로부터 사진(?)을 가져오기 위해서는 json() 메서드를 사용할 필요가 있다.

---

---

fetch 실습

login =() => {
      fetch('http://10.58.xxx:8000/user/login/', {
        method: "POST",
        headers: {
          'Content-type' : 'application/json'
        },
        body: JSON.stringify({
          name: this.state.name,
          password: this.state.password
        })
      })
      .then(response => response.json())
      .then(response => {console.log(response);
 }

• fetch 메서드는 첫번째 인자로, 해당 API 주소를 받는다.
• 두 번째 인자로 method, header, body 와 같은 정보가 들어간다.
• method의 경우, 크게 'POST'와 'GET'을 사용하는데,
  단순히 두 번째 인자 없이 fetch(API주소)로만 메서드를 사용할 경우에는 GET으로 이용된다.
• 헤더 부분에서 content-type을 지정하여 JSON 파일이라는 것을 알리지만, 이것이 없어도 JSON 파일로 해석한다(?, 확실하진 않다.)
• header부분은 요청하는 방법에 관한 내용이라면, body에는 데이터베이스에 보내고 싶은 내용이 들어간다.
• js 파일로 작업을 했기 때문에, 해당 내용을 JSON으로 바꿔줘야 하는데 이때 쓰는 방식이
  JSON.stringify({내용(객체로 표현)})
• .then 은 비동기 메서드?로 response를 인자로 받는데, 이 response. 즉, 데이터베이스에서 응답이 왔을 때 콜백함수를 실행한다.
• response.json() 은 바디 상단에 기입한 JSON()과는 정반대의 개념으로, JSON 형식으로 전달된 response를 js 형식으로 바꿔준는 역할을 한다.
• response가 잘 되었는지 확인하기 위해 console.log(response)하는 습관이 필요하다.

---

---

fetch 응용

fetch 메서드를 사용하기 위해서는 기본적으로 인자를 하나만(API 주소) 두고 사용할 수 있지만, 원하는 결과를 위해서는 header와 body에 정확한 내용을 기입하여 사용해야한다.
그러나 기입하는 내용이 생각보다 길기 때문에 fetch가 필요한 상황마다 작성하는 것은 매우 소모적?이다. 따라서 fetch(get하는) 메서드를 함수로 지정하여 필요할 때 마다 사용하는 것이 좋다.

function getFunction =() => {
	fetch(API 주소, 필요한 정보들)
}

이렇게 작성했을 때 장점은 재활용이 가능하다는 점이다. 무엇보다 편리하다.
예를 들어, fetch(post)를 쓰고 fetch(get) 해야하는 상황을 생각해보자.
댓글을 단다고 했을 때. 댓글을 올리면 데이터를 데이터베이스에 "POST"하고
그 데이터가 저장된 새로운 데이터를 "GET" 해야할 때,
fetch(get)을 함수로 지정하지 않았다면 매우 긴 함수 정의 코드를 작성해야하지만
미리 함수로 지정해놓았다면 다음과 같이 사용할 수 있다.

fucntion handlePost(API 주소, 인자 (method:"post") 
	이후 생략
	.then(response => response.json())
    .then(this.getFunction)

---

---