[React] API 통신 - axios

Axios란?

React에서 AJAX를 구현하려면 JS 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야함

(HTTP Client - HTTP 상에서 커뮤니케이션하는 자바 기반 컴포넌트)

(AJAX - JS를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기능)

HTTP Client 라이브러리에는 Fetch API, Axios가 있음

 

Axios 사용법

• GET: 입력한 URL에 존재하는 자원에 요청

axios.get(url[, config])

주소에 있는 쿼리스트링을 활용해서 정보를 전달, 값이나 상태를 바꿀 때 사용 X

www.server.com/login?id=a&pw=123

이런 식으로 쿼리스트링이 붙여짐

 

• Post: 새로운 리소스를 생성할 때 사용

axios.post(url, {
	data: abc,
	...
	}, [, config])

post를 사용하면 주소 창에 쿼리스트링이 남지 않기 때문에 GET보다 안전함

 

• PUT: DB에 저장되어 있는 내용을 갱신

axios.put(url, data[, config])

 

•  DELETE: DB에 저장되어 있는 내용을 삭제

axios.delete(url[, config])

 

async/await 사용

async function getUser() {  
	try {    
		const response = await axios.get('/user?ID=12345');    
		console.log(response);  
	} catch (error) {    
		console.error(error);  
	}
}

주로 async/await와 함께 사용하는데, 위와 같이 async 메소드를 사용해서 사용함