서버 기다려주기 async / await

서버와의 통신은 비동기 통신이다.

요청과 응답의 순서가 보장되지 않는다.
서버에 요청을 한다 하더라도 선언해둔 상수처럼 그 즉시 답을 얻을 수 있는게 아니라는 이야기다. 서버에 요청을 하면 순차적으로 처리가 완료됨에 따라 응답이 제공된다.
여기서 문제는 서버에 요청 후 코드는 기다리지 않고 다음 행동을 하게된다는 것이다.

예시로 만약 서버에게 db에서 data에 있는 데이터를 가져와 tmp_data에 저장을 요청하고
해당 값을 보여달라 요청을 하게되면 어떻게 될지 알아보자.

const tmp_data = getDocs(collection(db, "data"));  //데이터 요청
console.log(tmp_data);  //console에 데이터 표시 에러

문제 될 것이 없어보인다.

하지만, 현실은 서버에 요청만 하고 서버가 열일중에 코드는 바로 다음줄로 넘어가 진행된다.
결국 tmp_data는 비어있는 상태로 console.log가 작동하게 된다.

브라우저 : tmp_data 몰...루… 서버가 안줬어…

그렇다면 어떤 방법을 써야할까?

바로 async 함수이다.

async 함수는 서버에 요청을 하는 경우 서버로부터 실행 계획을 promise를 통해 확답받는 구조로 진행된다. 물론 확답을 받는다고 별반 차이는 없다.

return async function (dispatch) {  //async 함수
const tmp_data = getDocs(collection(db, "data"));  //알았어 곧 할게! promise!
console.log(tmp_data);  //console에 데이터 표시 에러
}

브라우저 : tmp_data … promise 서버가 곧 해준데… 아직은 몰…루…

줄때까지 안가!

async함수만 사용할 수 있는 await 문이 있다.
await이후에 오는 promise는 답을 받겠다는 표현이다.

return async function (dispatch) {  //async 함수
const tmp_data = await getDocs(collection(db, "data"));  //알았어 곧 할게! promise!
//await. 끝날 때 까지 안가. 빨리 해와.
console.log(tmp_data);  //정상표시
}

이처럼 async / await 을 이용하면 필요에 따라 서버 응답이 완료되는 것을 기다린 후 코드를 순차적으로 진행할 수 있다.