TIL | 18 [React] Fetch 함수

API & fetch에 대해 알아보자.

API & fetch

React 애플리 케이션에서 API를 사용하는 방법은 Axios 와 Fetch API 가 있다.

API는 React 애플리케이션에 사용되는 데이터를 의미한다. 클라이언트 측에서 수행 할 수 없는 특정 작업이 있으므로 이러한 작업은 서버에서 구현된다. 그런 다음 API를 사용하여 클라이언트 측에서 데이터를 사용할 수 있다.

fetch() 함수 기본

fetch('api 주소')
.then(res = > res.json())
.then(res => {

});

get인 경우

fetch() 함수에서 default method는 get이다. API 명세가 아래와 같다면, 아래 코드와 같이 get를 생략 후 호출이 가능하다.

fetch('Api 주소')
.then(res => res.json())
.then(res => {
  if (res.success) {
      console.log(`${res.user.name}` 님 환영합니다);
  }
});

method가 post인 경우

fetch() 기본은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출했는데, post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 한다.

 fetch('Api 주소', {
    method: 'post',
    body: JSON.stringify({
        name: "seungchan",
        pw: 123456
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("로그인 완료 !");
    }

fetch() res.json()

첫 번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체이다.

그런데 console을 확인해보면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것이다. 즉 { success: true } 라는 JSON 데이터는 나오지 않는다.

응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야한다. 그러면 이 값이 두 번째 then 함수의 인자로 온다.

json 사용 이유는 ?

모든 데이터를 바꿔줄 필요가 없기 때문이다. body에 있는 정보들만 꺼내 바꿔주는게 json 이다.

비동기 처리

• 동기는 순차적, 비동기는 병렬적으로 일을 처리한다.

• fetch는 비동기적으로 처리되는 함수이고, 처리가 완료되기까지 시간이 오래걸리기 때문에 fetch가 끝나기도 전에 다른 함수가 먼저 실행될 수 있다. 그렇게 때문에 then을 사용하면 순서를 고정 시킨다.