[React.js] React 사용을 위한 자바스크립트 응용 - async & await

 

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.

async

async는 function 키워드 앞에 선언한다.

async function helloAsync() {
  return 'hello Async';
}

function 앞에 async를 붙이면 해당 함수의 return 값은 항상 Promise 객체를 반환하게 된다. 위의 함수의 경우는 return값이 Promise가 아니지만 놀랍게도 async를 붙여주면 이행 상태의 Promise(resolved promise)로 값을 감싸 반환된다.

 

async function helloAsync() {
  return 'hello Async';
}

console.log(helloAsync());
/*
Promise {<pending>}
	<constructor>: "Promise"
		name: "Promise"
*/

Promise 객체로 반환되면? 당연히 then()도 사용할 수 있게 된다.

async function helloAsync() {
  return "hello Async";
}

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

반응형

await

await은 Promise 처리가 될 때까지 기다리고 결과는 그 이후에 반환된다. 예시를 위해 delay()라는 함수를 만들고 helloAsync()를 입력받은 숫자만큼 지연시켜 출력하는 프로그램을 만들어보자.

function delay(ms) {
  return new Promise((reslove) => {
    setTimeout(reslove,ms)
  });
}

async function helloAsync() {
  return delay(3000).then(()=> {
    return "hello Async";
  });
}

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

이렇게하면 3초동안 기다린 후 helloAsync의 처리가 완료된다. 여기에서 await을 사용하면 좀 더 간략하게 코드를 작성할 수 있다.

function delay(ms) {
  return new Promise((reslove) => {
    setTimeout(reslove,ms)
  });
}

async function helloAsync() {
  await delay(3000);
  return 'hello async';
}

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

await은 말 그대로 Promise가 처리될 때까지 함수 실행을 기다리게 한다. Promise가 처리되면 그 결과와 함께 실행이 된다. Promise가 처리되길 기다리는 동안에는 엔진이 다른 일을 할 수 있기 때문에 CPU 리소스 낭비가 되지 않는다.
예제를 보면 await delay(3000);이 있는데 delay 앞에 await이 붙어 있어 delay가 끝나기 전까지는 그 다음 줄인 return문이 실행되지 않는다. 즉 await가 붙은 코드는 동기적으로 사용될 수 있다는 것이다.

참고로 await은 async가 붙은 함수에서만 사용할 수 있다.