React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
API
API에 대한 정의는 구글에 검색하면 위키백과에 잘 나와있다. 여기로 굳이 내용을 가져오지 않는 이유는 그걸 봐도 와닿지가 않아 이해가 불가능하기 때문이다. API를 좀 더 쉽고, 와닿게 설명하기 위해 레스토랑을 차렸다.
손님이 레스토랑에 방문해 음식을 먹으려면 총 4단계가 필요하다.
- 주문
- 주방장이 재료를 찾는다.
- 찾은 재료로 요리한다.
- 서빙한다.
이 네가지 과정이 웹사이트에서 어떠한 정보를 가져오는 방식과 유사한 방식이다. 위의 것과 웹사이트 동작 방식을 약간 섞어서 얘기해보자면,
- 클라이언트(손님)이 서버(주방장)에게 Request(주문)한다. - 데이터 요청
- 서버(주방장)이 Database(냉장고)에 알맞은 Query(재료)를 보낸다(찾는다) - 데이터 검색
- 알맞은 데이터를 가공(요리)하여 - 데이터 가져오기
- 클라이언트(손님)에게 서버(주방장)가 Response(서빙)을 보낸다(한다). - 요청 데이터 전달
이러한 이러한 일련의 과정이 API이다. API 호출은 클라이언트가 서버에 데이터 요청을 보내서 서버에게 요청 데이터를 전달 받는 것이라 생각하면 된다. react를 이용해서 우리가 개발할 부분은 1번과 4번, 즉 데이터 요청 Request와 요청 데이터를 전달받는 Response 부분이다.
어떻게 보면 자바스크립트의 함수와 비슷하다. 하지만 약간의 차이점이 있는데 함수는 우리가 실행과 종료 지점을 예측할 수 있지만 API는 데이터 응답이 언제 오는지 정확하게 알 수 없다는 점이다.
보통 클라이언트의 PC와 서버의 PC는 다른 컴퓨터이다. 클라이언트가 데이터를 요청했을 때 다른 컴퓨터인 서버가 응답하는 시간은 다양한 변수가 있는데 인터넷 연결 속도, 서버의 부하, 지연 등에 의해 예상할 수 없고 때로는 실패해버리기까지 한다. 이 이유 때문에 Promise 객체에 reject(실패) 처리가 따로 있는 것이다.
언제 끝날지 모르는 처리들을 모두 동기식으로 처리하면? 웹 사이트에서 무엇을 검색하여 결과를 받아오기까지만해도 1분이 넘게 걸릴 수도 있다. 이래서 Promise 객체를 이용해 비동기를 방식을 이용한다.
API 호출을 이용하는 실습을 해보자.
API는 인증이 허가된 사용자에 대해서만 요청에 대한 응답을 보내는 서버가 대다수이다.
그래서 이번 실습에서는 JSON Placeholder를 사용해보자. JSON Placeholder는 API 호출 시 더미 데이터를 보내주는 서비스를 제공한다. 참고로 JSON Placeholder는 Open API로 무료로 사용할 수 있다.
Resources에 있는 더미 데이터 종류 중에 /posts를 클릭해보자. 클릭하면 JSON 데이터가 text로 적혀있는 페이지를 볼 수 있다. 여기서 우리에게 필요한건 주소이다.
API에게 있어 주소란? 말 그대로 주소다. 우리는 함수를 호출할 때 함수명을 작성해 호출을한다. API는 이름 대신에 API가 가지고 있는 각자의 고유한 주소를 이용해 함수처럼 호출한다. 그러니 주소창에 있는 저 주소를 복사!
소중하게 복사해서 가져온 API 주소를 자바스크립트에서 호출해보자.
let response = fetch('https://jsonplaceholder.typicode.com/posts').then((res)=>{
console.log(res);
});
여기서 새로운 fetct()가 등장했다. fetch는 자바스크립트의 내장 함수이며, API를 호출할 수 있도록 도와준다. 또한 return은 Promise 객체로 내뱉으며 때문에 비동기식으로 동작한다. 그래서 then()을 이용해 콘솔에 출력할 수 있다.
어? 근데 아까 사이트에서 본 데이터들과 생김새가 많이 다르다. 어쩌다 이렇게 된 걸까? fetch는 API의 결과 값을 바로 반환하는게 아니라 성공 자체를 반환하기 때문에 response 객체가 출력된 것이다. 그러면 결과 값은 어떻게 출력할 수 있을까?
async function getData() {
let rawResponse = await fetch('https://jsonplaceholder.typicode.com/posts');
let jsonRespnse = await rawResponse.json();
console.log(jsonRespnse);
}
getData();
위의 코드를 실행하면 배열 형태로 출력해준다.
