axios가 뭐야?

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.

백엔드랑 프론트엔드랑 통신하기 위해 사용하는 것

이라고 아주 간단히 설명이 가능하다.
그런데 굳이 지금까지 사용하던 fetch를 떠나
axios를 사용하려는 이유에 대해 지금부터 설명해보도록 하겠다.

axios의 특징

1. 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
2. Promise(ES6) API 사용
3. HTTP 요청 취소
4. HTTP 요청과 응답을 JSON 형태로 자동 변경

fetch와 axios의 차이점

	fetch	axios
install 필요 유무	빌트인이라 설치 필요 X	별도 설치 필요
속성	body 속성	data 속성
JSON 변환	.json()을 사용해 문자열로 변환 필요	자동 변환
보안 위협에 대한 보호	별도 보호 X	XSRF보호 제공
브라우저 지원	Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1+이상에 지원	대부분의 브라우저에서 지원

사용법

가장 기본이 되는 then, 그리고 catch로 끝내보려고 했지만
최근에 공부했던 비동기 처리. 곧 공부하려 했던 async/await를
사용해보고 싶어졌다.

그래서 사용해줬지만 문제가 발생했다..?

useEffect에서 async/await를 axios와 사용할 때 error 발생!

이유를 알아보니 async await 함수는
프로미스 객체를 반환 하므로 부수효과 함수가 될 수 없다.
부수 효과 함수는 함수만 반환 할 수 있으며, 반환된 함수는 부수 효과 함수가 호출되기 직전과 컴포넌트가 사라지기 직전에 호출된다.

useEffect에서 async await 함수를 사용하는 방법 중 하나

• 부수 효과 함수 내에서 async await 함수를 만들어서 호출하는 것

오류 없이 데이터가 들어오는 것을 볼 수 있다.

Reference
axios의 특징
useEffect 내부에서의 async/await 오류
부수 효과와 순수 함수