자바스크립트 ES 6에서 async await 사용하는 방법 알아보기

자바스크립트 ES 6의 async, await에 대하여 알아봅니다. 이 둘은 뭘 할 수 있고 어떤 경우에 사용할까요?

# ES 6의 async, await 알아보기

자바스크립트를 사용하여 비동기 방식으로 무엇인가를 실행할 때.. 예를들어 api를 호출한다면 호출이 끝난 후 콜백함수를 실행하고 합니다. 그런데 경우에 따라서는 비동기 호출이 하나가 아닌 여러개를 동시에 호출하거나 아니면 다수의 콜백함수를 원하는 순서대로 실행하고 싶을 수 있습니다.

이런 경우 Promise(프로미스) 객체를 사용합니다. Promise를 간략하게 알아보면...

@ Promise(프로미스)는?
프로미스는 약속이라는 사전적 의미로 뭔가를 실행할 콜백함수를 호출하기 위한 목적으로 생성하는 객체입니다. 프로미스 객체는 resolve()와 reject() 메소드를 가지게 되는데 비동기 호출이 끝날 때까지 지연 후 완료시키는 역할을 합니다.

다시 async, await를 알아보면... async가 사용된 함수는 리턴값으로 프로미스를 리턴하게 됩니다. 그래서 await를 사용한 함수가 완전리 resolve() 될 때를 기다렸다가 다음 구문을 호출하거나 값을 리턴할 수 있습니다. 참고로 await는 반드시 async 함수 내부에서 사용해야 합니다. 그러므로 이 둘은 반드시 짝을 이루고 사용해야한다는 것을 염두해두시기 바랍니다. 그럼 아래의 예제를 통해 자세히 알아봅니다.

! 자바스크립트 await, aync 예제보기

아래는 간단한 예제 소스입니다. 비동기 함수 startTo()를 만들고 await를 사용한 내부 함수 doSomething()을 호출하도록 합니다.

위 단계를 구분해 알아보면 다음과 같죠.

• 1. startTo() 이름의 async 함수를 생성 후 실행
• 2. startTo() 내부의 doSomething()을 호출하되 3초 후 끝나도록 프로미스를 생성 후 resolve() 시킴
• 3. await이 적용된 doSomething()이 끝나면 result 값 'Timer Done'을 return함
• 4. startTo는 Promise를 리턴하므로 startTo().then()으로 받음
• 5. 마지막으로 결과를 콘솔에 출력하며 끝

여기서 중요한 부분은 doSomething은 3초 후 종료하기 위해서 프로미스를 생성하고 resolve()를 수행한 부분입니다. 이처럼 async, await은 프로미스와 함께 사용할 수 있습니다.

이제 모든 코드를 나타내면 아래와 같습니다.

위 코드를 실행하면 startTo() 함수가 실행되고 내부에서 doSomething() 함수를 await를 사용하여 호출합니다. 이때 doSomething()은 프로미스의 resolve()를 사용해 3초가 지난 뒤에 'Timer Done!'을 리턴하고 이를 콘솔창에 출력하며 끝나게 됩니다.

여기까지 ES 6의 await 그리고 async의 사용방법에 대하여 간단하게 알아보았습니다. 마지막으로 아래와 같이 정리하고 마치고자 합니다.

! async / await 노트

다시 중요한 부분을 정리한 내용입니다.

- async / await을 사용하여 비동기 코드를 수행함
- async 함수 내부에만 await을 사용할 수 있음
- async는 자체적으로 프로미스를 반환함
- Promise 객체는 then으로 받을 수 있으므로 완료 후 실행할 코드를 이곳에서 수행할 수 있음

프론트엔드 프레임워크(React, VueJS 등등)를 사용하는 환경에서도 자주 사용되니 꼭 알아두는 게 좋겠습니다.