TIL 17

임태진·2020년 12월 27일
0

TIL

목록 보기
13/14

fetch() 함수 사용법


fetch() 함수 기본

위의 형태로 기억한다. 각각의 단계가 무엇을 뜻하는지 명확히 알아야한다. 그리고 화살표 함수로 몸통을 확 줄인 위의 코드도 ES5의 함수 선언식으로 바꿨을 때 어떤 모양인지 알아야 더 복잡한 fetch를 구현할 수 있다.

위 코드에서 보이는 화살표 함수를 ES5의 함수 선언식으로 바꿔보고 넘어가보자.

위 코드에서 변수의 scope는 각 함수이므로 첫 번째 then와 두 번째 then 안에 있는 res는 서로 다른 것이다.

단지 둘다 응답이다 보니 response의 줄임말인 res를 사용했을 뿐이다.


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

fetch() 함수에서 default method는 get이다. 그래서 위의 코드는 get으로 호출한 것이다.

아래와 같은 api 명세를 보고 어떻게 fetch()를 사용하면 되는지 작성해보자.

호출하려면 아래와 같이 하면 된다.

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

리액트를 한다고 가정하면, 아래와 같이 구현할 수 있다.


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

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

호출해야할 api가 get인지, post인지 모른다. api를 개발한 백앤드 개발자에게 물어봐야 한다. api 정보를 아는 것은 오로지 api를 만든 개발자 뿐이다.

이번에는 아래와 같은 api 명세를 받았다고 해보자.

아래와 같이 구현한다.

  1. 두 번째 인자에 method와 body를 보내주어야 한다.
  2. method는 post
  3. body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환했다.

post로 데이터를 보낼 때 JSON.stringfy를 항상 하다보니 axios는 굳이 감싸주지 않고 객체만 작성해도 되는 편리한 점이 있다. 이렇듯 axios는 소소하게 편한한 설정을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수 있다.


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

위의 get 예제에서 3이라는 user id를 path로 넘겨주었다. 그런데 path 말고 query string으로 넘겨줘야 할 수도 있다.

언제는 path로 언제는 query string이고 할 수 있다는 말은 아니고, 예제이다 보니 같은 api를 사용했다. 데이터를 전달하는 방식 또한 백앤드 개발자에게 물어봐야 한다.

사실 특별한 것은 없다. api 주소 뒤에 그냥 붙여주면 된다.


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

post 예제를 다시한번 보자. 모든 코드에 then이 두 번 있고, 첫 번째 then에서 res => res.json() 이 도대체 뭘까?

첫 번째 then의 res가 어떤 값이 들어오길래 res.json()을 리턴하는가? console.log를 찍어본다.

위의 화살표 함수에서 console.log를 찍어보려면 return 하는 화살표 함수에 바디를 다시 만들어줘야 한다. 그래서 코드 가장 처음에 ES5의 함수 선언식으로 바꿔본 것이다. 함수 선언식으로 바꾸지는 않지만 바디가 추가된 화살표 함수로 수정해보자.

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

그런데 console을 확인해면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않는다. 즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않는다는 말이다.

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


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

위의 내용까지 보면 fetch().then().then() 형태만 기억하면 될 것 같은데 저렇게 설명한 이유는 백엔드에서 응답 body를 안 주는 경우도 많기 때문이다.

응답 body로 JSON 데이터를 주지 않는데 프론트에서 Response Object의 json()을 호출하면 에러가 난다.

다음과 같은 상황을 생각해보면 된다.

위의 상활일 때 어떻게 fetch()를 구현하면 되는지 한 번 보자.

이제는 왜 then이 두 개 이고, 각각 어떤 역할을 하는지 잘 이해될 것이다.

profile
Frontend-Developer

0개의 댓글