자바스크립트는 기본적으로 동기적인 방식으로 동작을 한다.
그러면 도대체 동기/비동기 이 두 방식의 차이점은 무엇인가?
1. 동기
어떤 작업이 실행되서 끝날때 까지 기다리는 방식. 즉 코드를 한줄 한줄씩 읽어나가는 방식
2. 비동기
어떤 작업이 실행될 때 그 작업이 끝나기를 기다리지 않고 다른 작업먼저 실행시키는 방식
3. fetch
const fetchData = async () => {
try {
const response = await fetch('https://api.test.com/data'); // fetch가 완료될 때까지 기다림
const json = await response.json(); // response.json()이 완료될 때까지 기다림
setData(json); // json은 이제 실제 데이터를 담고 있음
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
};
위 예제코드를 통해 하나의 사례를 살펴보도록 하겠다.
프론트엔드에서 api를 이용해서 fetch를 진행할 경우 서버에 연결되는 시간이 길거나, 데이터의 크기가 크면 그 정보들을 받아오는 과정에서 시간이 굉장히 오래걸린다.
예를들어 fetch하는 과정에서 10초가 걸린다고 가정을하고, 이 과정이 동기적으로 이루어진다고 생각을 하면 사용자는 아무것도 보지 못한 상태로 10초나 기다려야 한다.
사용자의 경험을 상당히 해치는 행위이기 때문에 fetch는 기본적으로 Promise라는 비동기 작업이 완료될 시점의 결과값을 return한다. 즉 fetch는 비동기적으로 처리되는 함수이다.
따라서 사용자는 데이터를 받아오기 전에 최소한의 UI는 볼 수 있게 된다.
하지만 reponse값으로 json을 받아오는 과정도 Promise가 반환된다.
그러므로 fetchData함수 안에 await이라는 키워드를 사용하지 않으면 setData함수가 먼저 실행되고 결국 우리가 원하는 값을 얻지 못하게 된다.
그래서 await이라는 키워드를 이용해 비동기적으로 처리되는 과정이 끝날 때까지 기다릴 수 있도록 기다린다는 표시를 해주어야 한다. await을 사용하는 함수는 앞에 async라는 표시를 해주어야 한다.
4. 과정
1) fetchData함수를 만난다. async라는 Promise를 반환하는 비동기함수이기 때문에 이 함수가 진행되는 동안 다른 코드들도 실행이 된다. 즉 다른 UI값들이 표시된다.
2) fetchData함수 안에서 await이라는 키워드를 이용해 각각 Promise를 반환하는 비동기 함수들을 동기함수 처럼 만들어서 비동기 작업이 끝날 때까지 기다릴 수 있도록 한다.
3) setData를 통해 비동기 작업이 전부 완료되고 우리가 원하는 값을 불러올 수 있게 된다.
4) useEffect를 사용했기 때문에 기존에 optional chaining을 사용했던 내용들이 null에서 실제 값으로 변경되어 화면에 뿌려지게 된다.