[React] Fetch함수

GyungHo Go·2020년 5월 22일

HTML, CSS, Javascript를 이용해서 인스타그램 클론코딩을 마치고, 리액트로 바꾸었다.
이번 작업은 백엔드에게 API받아서 로그인을 할 수 있는 작업을 하였다.

fetch함수

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. 이는 HTTP 요청에 최적화 되어있고 상태도 잘 추상화 되어있고, promise를 기반으로 되어있기 때문에 상태에 따른 로직을 추가하고 처리하는데 최적화 되어있다.
네트워크 요청은 다음과 같은 경우에 이루어진다.

주문전송
사용자 정보 읽기
서버에서 최신 변경문 가져오기 등등

그런데 이 모든것들은 페이지 새로 고침 없이도 가능하다.

Baisc Use

fetch()기본 문법은 다음과 같다.

let promise = fetch(url, [options])

url-접근하고자 하는 URL
options - 선택 매개변수, mehtod나 header 등을 지정할 수 있다.

fetch('url')
.then(response => response.json())
.then(response => data.filter(item => item.isRequired));

fetch 함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다.
fetch API는 3개의 interfeace를 도입하고 있는데 Headers, Request, Response이다.

headers

Headers 객체는 HTTP header와 대응되는 객체이다.

Request

Request는 HTTP요청을 통해 자원을 가져오는 인터페이스 이다.
Request는 URL, Header, Body가 필요하다. 그리고 Request에 대한 mode제한과 certidicate 관련 설정도 추가 할 수 있다.
Request 객체의 첫번째 인자는 호출한 Path가 들어가고, 두번째 인자에는 Request에 대한 정보가 들어간다.

method
headers
body
등등이 있다.

method

Method는 HTTP method와 동일한 스팩으로 들어가면 된다. GET/POST/HEAD/PUT/DELETE/OPTION/PATH 등등

GET은 어떠한 정보를 가져올 때,
POST는 어떠한 정보를 백에 보낼 때,
DELETE는 단어 그대로 삭제할 때 사용한다.
메서드의 디폴트 값은GET이기 때문에 아무런 정보를 적지 않으면 GET으로 적용된다.
그리고 소문자로 지정해도 자동으로 대문자로 Uppercase된다.

headers

headers 는 Request Header를 지정해주는 곳인데, 2가지 형식으로 넣을 수 있다.
Object lireral과 Headers 객체의 인스턴스를 넣을 수 있다.

const req = new Request('/api/posts', {
  method: "GET",
  headers: {
    'content-type': 'application/json',
  }
});
const req2 = new Request('/api/posts', {
  method: 'GET',
  headers: new Headers({
   'content-type': 'application/json',
  })
})

body

body는 HTTP Request에 실을 데이터인데 여러가지 타입을 넣을 수 있다.
득, 전달하고자 하는 응답 내용이다. 백엔드와 통신할 때는 객체로 통신하기 때문에 객체타입으로 작성해야 한다.

Response

Response는 fetch를 호출하면 가져올 수 있는 객체이다.

status

status는 HTTP response Code를 담고 있다. 일반적으로 성공적이었다면 200이 떨어지게 될것이다.

statusText

statusText는 기본값은 ok이고 상황에 따라 다른 Message가 담길 수 있다.

ok

ok는 status의 200-299의 값을 추상화한 boolean인데 200-299사이의 status이면 true를 가지게 된다.

headers

Reponse headers 이기 때무에 headers의 guard 속성은 reponse로 되어있다.

tpye

type은 Response 객체의 type을 말한다.

이제 내가 작성한 코드를 보겠다.
로그인 페이지를 구현해 보고자 한다.
백엔드에게 API를 받아서 값을 넣으면 main화면으로 넘어가는 작업이다.
로그인작업이기 때문에 정보를 보내는 POST 메서드를 사용하였다.
method, headers, body는 전달하고자 하는 정보에 대한 정보이기 때문에 정보를 가져올 때, 즉 GET 하는 경우에는 작성해 줄 필요 없다.

class Login_GH extends React.Component{
    state ={
        loginEmail : "",
        loginPw : "",
        btnColor : true
    }

fetch("http://10.58.7.154:8000/accounts/signin", {
          method: "POST",
          headers: {
            'Content-type': 'application/json'
        },
          body: JSON.stringify({
            email: this.state.loginEmail,
            password: this.state.loginPw
          })
        })
        // .then(response => console.log("response"))
          .then(response => response.json())
          .then(response => {
        
            if (response.token) {
              localStorage.setItem("wtw-token", response.token);
              this.props.history.push("/main_gh");
            } else if (!response.token) {
              alert("올바른 회원이 아닙니다");
              this.props.history.push("/signup_gh");
            }
          });

then 함수

자바스크립트에서 함수는 동기함수, 비동기 함수로 나뉜다. 우리가 작성한 코드들은 위에서 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다. 이것이 동기함수이다.
API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 쓰는 것이다.

참고
https://medium.com/@kkak10/javascript-fetch-api-e26bfeaad9b6
https://velog.io/@ppl8709/TIL-3-fetch-%ED%95%A8%EC%88%98
https://ko.javascript.info/fetch