React ■ Axios 사용하기

 

Axios 사용하기

Axios란?

• Axios

Vue.js에서 권고하는 Promise 기반의 HTTP 통신 라이브러리

* 우선은 JavaScript의 ajax와 같은 기능을 수행한다고 생각하면 됨

* Vue 진형에서 권고 하지만, React에서도 널리 사용되는 라이브러리중의 하나

 

• Promise

자바스크립트에서 비동기 작업을 수행하기 위한 방법 중 하나

-> Callback, Promise, Promise + generator, async/await

 

• Axios 설치

npm install axios

 

• Axios 테스트 - 1

아래 폴더 구조에 맞춰 폴더 및 파일 생성

 

 

• Axios 테스트 - 2

axiosConfig.js 파일에 아래와 같이 코드 작성

 

• Axios 테스트 - 3

testApi.js 파일에 아래와 같이 코드 작성

 

• Axios 테스트 - 4

main.jsx에 라우팅 설정

 

• Axios 테스트 - 5

main.jsx에 라우팅 설정

 

 

• useEffect()

DOM이 렌더링된 이후 특정 작업을 한번 실행할 수 있도록 해주는 리액트 훅

 

 

• React Hook

리액트의 생명 주기(Lifecycle) 기능을 함수형으로 만들어 작성하던 것을 좀 더 편하게 사용하기 위해 완전한 함수로 지원해주는 기능

* React 16.8 부터 추가됨

 

 

• 응답 확인

localhost:5173/axiosTest 요청 후 응답되는 데이터 확인하기

 

 

어후 덥다 그럼 20000!