[React] fetch 와 axios 어떤 차이가 있을까? + axios 설치하지 않을 경우 에러

리액트 프로젝트를 진행하면서 fetch와 axios 둘 중 어떤 걸 사용할지 논의를 했었는데 둘 다 큰 차이가 없고 비동기 통신할 때 사용하는 걸로만 알고 있었지만 내가 이걸 왜 사용하는지 알고 쓰고 싶어서 정리해 보았다.

fetch와 axios 둘 다 js의 비동기 통신을 할 때 사용하는 방법이다.

fetch는 전역 fetch()를 통해 비동기적으로 가져올 수 있고 자바스크립트에서 기본적으로 제공해주는 것이기때문에 별도의 설치가 필요없지만 사용하기 위해서는 .json()을 사용해 JSON데이터 형식으로 변환해서 사용해야한다.
axios는 node.js에서 사용할 수 있는 promise 기반 라이브러리로 npm, yarn 같은 패키지 매니저를 통해 설치할 수 있다. 자동으로 JSON데이터 형식이 된다.

npm에서 설치하는 법
$ npm install axios
 
yarn에서 설치하는 법
$ yarn add axios

그리고 이런 메시지를 볼 일은 없겠지만 리액트에서 axios를 사용하는데 설치를 안해주었다면 아래와 같은 에러가 뜰 것이다.

Uncaught Error: Cannot find module 'axios'

이런건 바로 설치해주면 해결된다!