[JS] async & await 비동기 처리 코드 작성하기

async & await

Promise를 쉽고 가독성 있게 작성할 수 있는 키워드 입니다.

function hi() {
  return 'hi';
}

async function hiAsync() {
  return 'hiAsync';
}

두 개의 함수가 있습니다. 아래 함수는 function 앞에 async 키워드를 붙인 것을 확인할 수 있습니다.

hiAsync 함수의 return 타입은 Promise<string> 입니다.

function hi() {
  return "hi";
}

async function hiAsync() {
  return "hiAsync";
}

console.log(hi());
console.log(hiAsync());

로그를 출력해보면 hiAsync()는 Promise pending 상태인 것을 알 수 있습니다. pending 상태는 아직 실행되지 않은 상태를 의미합니다.

이렇게 함수 앞에 async 키워드를 붙히게 되면 자동적으로 해당 함수는 Promise를 리턴하는 비동기 처리 함수가 됩니다.

hiAsync().then((res) => {
  console.log(res);
}); // hiAsync

hiAsync 함수는 Promise 객체를 리턴하기 때문에 then 함수를 사용할 수 있습니다. hiAsync가 출력되게 됩니다.

function msDelay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function hiAsync() {
  return msDelay(3000).then(() => {
    return "hiAsync";
  });
}

hiAsync().then((res) => {
  console.log(res);
});

해당 코드는 3초를 기다린 후 hiAsync를 출력하는 프로그램 입니다. 이 코드를 await을 사용하는 코드로 바꿔보겠습니다.

function msDelay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function hiAsync() {
  await msDelay(3000);
  return 'hiAsync'
}

hiAsync().then((res) => {
  console.log(res);
});

await 키워드를 비동기 함수 앞에 붙히게 되면 비동기 처리 함수가 동기 처리 함수처럼 동작하게 됩니다. await을 붙히게 되면 msDelay 함수가 종료될 때까지 return 'hiAsync'가 동작하지 않는 것 입니다.

await 키워드는 async 키워드가 해당 함수 앞에 존재해야 사용이 가능합니다.

function msDelay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function hiAsync() {
  await msDelay(3000);
  return "hiAsync";
}

async function main() {
  const res = await hiAsync();
  console.log(res);
}

main();

해당 코드도 3초 뒤에 hiAsync가 출력되는 것을 확인할 수 있습니다.

---

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.