✅ API & fetch?
React 애플리케이션에서 API를 사용하는 방법으로는 크게 Axios(Promise 기반 HTTP 클라이언트) 와 Fetch API(Javascript 내장 Web API)가 있다.
** Web API? 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수
API는 React 애플리케이션에 사용되는 데이터를 의미하다. 클라이언트 측에서 수행 할 수없는 특정 작업이 있으므로 이러한 작업은 서버 측에서 구현된다. 그런 다음 API를 사용하여 클라이언트 측에서 데이터를 사용할 수 있다.
API는 지정된 엔드 포인트가있는 JSON 형식 인 데이터 세트로 구성된다. API는 요청 및 응답의 형태에 대한 두 서비스 간의 계약 계약이라고 말할 수도 있다.
✅ fetch() 함수 기본
fetch('api 주소')
.then(res => res.json())
.then(res => {
// data를 응답 받은 후의 로직
});✅ method가 get인 경우
fetch() 함수에서 default method는 get이다. API 명세가 아래와 같다면, 두번째 코드와 같이 호출할 수 있다.
⏩ API명세
설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
{
"success": boolean,
"user": {
"name": string,
"batch": number
}
}⏩ Get method
fetch('https://api.google.com/user/3')
.then(res => res.json())
.then(res => {
if (res.success) {
console.log(`${res.user.name}` 님 환영합니다);
}
});✅ method가 post인 경우
fetch() 기본은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출했는데, post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 한다.
fetch('https://api.google.com/user', {
method: 'post',
body: JSON.stringify({
name: "yeri",
batch: 1
})
})
.then(res => res.json())
.then(res => {
if (res.success) {
alert("저장 완료");
}
})-
body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환했다.
-
post로 데이터를 보낼 때 JSON.stringfy를 항상 하다보니 axios는 굳이 감싸주지 않고 객체만 작성해도 되는 편리한 점이 있다. 이렇듯 axios는 소소하게 편한한 설정을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수 있습니다.
✨ 실제로 POST 방식으로 API를 호출하는 경우에는 API 명세를 꼼꼼하게 살펴보고, 모르는 부분이 있으면 해당 API를 개발한 개발자에게 물어봐야 한다.(API에 대한 정보는 그걸 개발한 백엔드 개발자만이 알 수 있다...) 보내줄 데이터의 형식, 키 등이 맞지 않으면 에러가 나기 때문이다.
✅ fetch() res.json()의 의미
첫 번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체이다.
그런데 console을 확인해보면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것이다. 즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않을 것이라는 말이다.
응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야한다. 그러면 이 값이 두 번째 then 함수의 인자로 온다.(Obj 형태로)
❓ 왜 json.parse가 아닌 json을 쓸까?
response 안에 정보는 너무 많고, 이 모든 데이터를 바꿔줄 필요는 없다. body에 있는 정보들만 꺼내 바꿔주는게 json이다.
✅비동기처리
-
동기는 순차적, 직렬적으로 테스크를 수행하고, 비동기는 병렬적으로 테스크를 수행한다.
예를들어 1부터 10까지의 함수가 있다고 가정해보자. 동기함수는 1이 끝나고 2, 2가 끝나고 3, 4, 5 ...의 순서로 실행된다면, 비동기함수는 순서와 상관없이 먼저 완성된 쪽이 실행 결과를 return하게 된다.
-
fetch는 비동기적으로 처리되는 함수이고, 처리가 완료되기까지 시간이 오래걸리기 때문에fetch가 끝나기도 전에 다른 함수가 먼저 실행될 수 있다. (=순서가 섞일 수 있다) 그렇기 때문에then을 써서 순서를 고정시키는 것이다. -
다시 말해,
then은 "fetch다 끝나고나서 이 일을 해줘"의 뜻을 갖는 셈이다.
