Fake API

/posts 선택

데이터들 확인 가능하다.
fetch 통신하기
page/post.js
import React from 'react';
function Post(props) {
const download = async () => {
let response = await fetch("https://jsonplaceholder.typicode.com/posts/3", {
method: "GET"
});
let data = await response.json();
console.log(data);
}
return (
<div>
<button onClick={download}>Download Post</button>
</div>
);
}
export default Post;
fetch
는 웹에서 서버와 통신을 하기 위해 사용하는 자바스크립트의 내장 함수이다.통신은 **시간이 오래 걸리는 작업(=비동기 I/O)**이기 때문에,
이를 동기적으로 실행할 경우 통신이 끝날 때까지 전체 프로그램이 멈추는 문제가 발생한다.
이를 방지하기 위해
fetch
는 기본적으로 비동기(Promise 기반) 로 작동한다.따라서 해당 작업을 처리할 함수(
download
)에 async
키워드를 붙여 비동기 함수로 선언하고,내부에서
await
를 사용해 fetch
의 응답을 기다리는 구조로 작성한다.await
는 해당 비동기 작업이 끝날 때까지 다른 작업은 계속 진행하고작업이 완료되면 결과 값을 받아서 다음 코드로 이어지게 하는 흐름을 만들어준다.


Share article