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을 사용하면 순서를 고정 시킨다.
