브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.
백엔드랑 프론트엔드랑 통신하기 위해 사용하는 것
이라고 아주 간단히 설명이 가능하다.
그런데 굳이 지금까지 사용하던 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 함수는
프로미스 객체를 반환 하므로 부수효과 함수가 될 수 없다.
부수 효과 함수는 함수만 반환 할 수 있으며, 반환된 함수는 부수 효과 함수가 호출되기 직전과 컴포넌트가 사라지기 직전에 호출된다.
오류 없이 데이터가 들어오는 것을 볼 수 있다.
Reference
axios의 특징
useEffect 내부에서의 async/await 오류
부수 효과와 순수 함수