[React] Axios란?

Axios란?

node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트.

서버와 통신하기 위해 사용된다.

 

✅ Axios의 특징

• HTTP 요청 처리를 한다.
• Promise 기반이라 비동기 요청에 용이하다.
• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 Http Api를 사용한다.
• HTTP 요청과 응답을 JSON 형태로 자동으로 변환해 준다.

 

 

Axios 사용 방법

먼저 axios를 사용하기 위해 아래의 명령어를 사용해 axios를 설치한다.

npm install axios

 

 

 

axios(config)

기본 문법은 위의 형태이고, 

HTTP 요청을 보낼 때 보내는 요청에 대한 설정을 config 객체에 담아야 한다.

 

 

config 옵션

config	내용
url	요청을 보낼 URL 주소, 엔드포인트
method	HTTP 요청 메서드 (GET, POST, PUT, DELETE 등)
params	URL의 쿼리 파라미터 설정
baseURL	공통적으로 사용하는 기본 URL 설정
headers	요청 헤더 설정
data	요청 본분 데이터 (POST, PUT, PATCH 등)
timeout	요청 제한 시간 (밀리초)
responseType	서버에서 받을 응답 데이터 형식 설정 (ex. json)

 

 

 

사용 예시

// GET
axios({
	method : 'get',
    url : url
})
.then((response) => {
	console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
	console.log(error); // 오류 발생 시
})


//POST
axios({
	method : 'post',
    url : url,
    data : {
    	name : value
    },
})
.then((response) => {
	console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
	console.log(error); // 오류 발생 시
})

 

 

 

이를 더 간결하게 사용할 수 있다!

// GET
axios.get('url')
.then((response) => {
	console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
	console.log(error); // 오류 발생 시
})


//POST
axios.post('url',
	{
    	name : value
    })
.then((response) => {
	console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
	console.log(error); // 오류 발생 시
})

 

 

 

HTTP Method

 

GET

• 입력한 url에 존재하는 자원에 요청을 한다.
• 웹 사이트 뒤에 쿼리스트링이 붙는다.
• 서버에서 어떤 데이터를 가져와 보여주는 용도로 주로 쓰인다.
  주소의 쿼리스트링을 활용해 정보 전달!

 

POST

• 새로운 리소스를 생성(create)할 때 사용한다.
• 주소창에 쿼리스트링이 남지 않기 때문에 GET 보다 안전!

 

PUT

• REST API 프로그램에서 DB의 내용을 갱신하는 목적으로 사용한다.

 

DELETE

• REST API 프로그램에서 DB의 내용을 삭제하는 목적으로 사용한다.