리액트 API 호출

리액트 API 호출

 

 

API(Application Programming Interface)

서로 다른 프로그램이 데이터를 주고받을 수 있도록 도와주는 인터페이스(매개체)이며, 일종의 규약이다.

 

 

 

[프로그램 A <-> 프로그램 B]

데이터를 주고받음

 

서로 다른 프로그램끼리 데이터를 주고받으려면, 당연히 서로 어떻게 통신하고, 어떤 데이터를 주고받을 것인지 미리 합의된 규약이 존재할 것이다.

 

프로그램 간 데이터를 주고받는 과정에서도 미리 합의된 규약이 존재해야 한다 그것이 API

 

 

두 프로그램이 서로 데이터를 주고받기 위해 소통할 때, 어떤 방식으로 서로 주고받을지 합의해서 매개체 역할을 해주는 일종의 규약 

 

 

 

 

 

REST API란

 

웹 서비스를 개발할 때 가장 범용적으로 사용되는 API이다. HTTP 프로토콜을 기반으로 동작한다.

 

요청하려는 데이터를 http로 시작하는 주소로 표현한다

ex) http://api.youtube.com/video/1

 

이때 api.youtube.com은 요청하려는 서버(호스트)의 주소에 해당하며

 

/video/1

은 요청하려는 데이터에 해당한다.

 

 

만약 클라이언트가 서버에게 http://api.youtube.com/video/1 같은 HTTP REQUEST를 보낼 때는 HTTP method도 함께 보내야 한다.

 

HTTP method는 서버가 데이터를 어떻게 처리해 주었으면 좋겠는지 설정하는 것이다.

 

데이터를 가져오고 싶을 때 : GET

데이터를 생성하고 싶을 때 : POST

데이터를 수정하고 싶을 때 : PUT

데이터를 삭제하고 싶을 때 : DELETE

 

 

 

 

 

api 끌어오기 

 

axios: http request를 좀 더 편하게 보낼 수 있게 도와주는 라이브러리 

 

npm i axios

을 통해 설치할 수 있다.

 

 

 

function fetchCountries () {
	const response = axios.get(‘https://~~’)
}

api 호출은 비동기로 작동한다. 즉 axiox를 호출한다고 해서 결과 값이 바로 변수에 저장되는 것이 아니다

 

 

 

async function fetchCountries () {
	const response = await axios.get(‘https://~~’)
}

 

만약 api 호출의 결과를 변수에 저장하고 싶으면 async와 await를 이용한다.

 

async를 붙인 함수는 비동기적으로 작동하며, await는 비동기 적으로 작동하는 함수 앞에 붙이게 되면, 비동기 함수가 종료될 때까지 기다려준다.

 

 

 

function fetchCountries () {

try{
	const response = axios.get(‘https://~~’);
	return response
}catch(e){
	return []
	}
}

api 호출은 언제든 실패할 수 있기에 위처럼 try-catch를 통해 에러 핸들링을 해줘야 한다.

 

 

 

 

 

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

공식문서를 계속 읽어보는 것이 좋을 것 같다.