[리액트] api 호출 2가지 방법

"fetch" API와 "axios" API가 존재한다.

📌 axios
fetch API와 유사한 Promise 기반 HTTP 클라이언트 라이브러리로 데이터를 동적으로 받아올 수 있다.
//Promise 기반 HTTP 클라이언트란?
http를 이용해서 서버와 통신하기 위해 사용하는 패키지

npm install axios

axios는 fetch API와 달리 json 객체로 변환해주는 과정을 자동으로 해준다. axios.get 메서드를 활용해 데이터를 비동기적으로 받아올 수 있다. 단, 응답 받은 객체에 data key에 접근하여 접근한 값(res.data)을 반환해야 데이터를 활용 가능하다.

📌 fetch
자바스크립트를 사용한다면 내장되어 있기 때문에, 별도의 설치 없이, 자바스크립트의 다른 메서드처럼 사용하면 된다.
fetch 메서드를 활용해서 data를 가져오면 => 해당 응답은 json 객체로 변환 후 return 해야 한다.