async / await

async / await 사용 목적 

비동기 처리를 위해 사용한다. 비동기 처리 문법에는 콜백(callback), 프로미스(Promise)가 있지만 이들의 단점을 보완하기 위해서 사용된다. async / await의 사용으로 코드가 가독성 좋아지고 작성하기 쉬워진다.

---

(참고 : 동기 처리와 비동기 처리)

사진 출처 : Sync vs Async(https://mranderson.nl/2020/09/15/sync-vs-async/)

비동기 처리는 서버에 데이터요청을 했을때, 언제 완료될지도 모르고 기다릴 수 없기 때문에 나머지 코드를 먼저 실행하는 것이다. 

동기(Synchronous)의 경우,

위 사진과 같이 작업이 여러 개 있다고 가정하자. 한 작업 실행 후에 해당 작업이 완료되어야 다음 작업을 진행할 수 있다. 그래서 우리가 데이터를 받아올 때 기다려야 한다. (이때 로딩 화면만 계속 보고 있을 수 있다)

비동기(asynchronous)의 경우,위 사진을 참고하여 작업이 여러 개 있다고 하자. 한 작업을 실행하고 그 작업이 실행되는 동안에도 다른 일을 할 수 있다. 순서가 중요하지 않은 작업이라면 비동기 처리를 하여 빨리 작업들을 처리할 수 있다. 특정 작업의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행한다. 

 

만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지상태가 되어버릴 것이다. 하지만, 비동기적으로 작업을 처리한다면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수 있다. 또한 기다리는 과정에서 다른 함수도 호출할 수 있다.

 

<비동기 처리의 예시>

콜백함수의 예시

setTimeout 함수를 사용하여 특정 작업을 예약할 때가 비동기적 작업 처리의 예시이다.

위 사진에 나온 코드를 실행하면 '대기 중...'이 먼저 출력되며, 3초 뒤에 printMe 함수를 호출하게 된다.

 

setTimeout 함수 사용 결과

위 사진과 같이 콘솔 창에는 '대기 중...'이 먼저 출력되며 그 다음에 3초가 지나서야 printMe 함수가 호출되는 것을 확인할 수 있다. printMe 함수를 호출하는 동안 setTimeout 함수를 사용하여 비동기 처리를 해준 것이다.

---

 

async / await 의 사용

async / await은 promise를 기반으로 작동하기 때문에 promise에 대한 이해가 필요하다.

 

 

promise 함수

위 사진은 정수 인자를 넣으면 1초가 지날 때마다 인자에 10이 더해서 콘솔에 출력하게 하는 코드다.

이전 사진에 있는 코드 실행 결과

이때 사용한 코드는 여러 함수가 중첩이 되어서 가독성이 좋지 않다. 이러한 코드 작성은 지양하는 것이 좋다. 이 코드를 가독성이 좋게 만들려면 promise 함수를 사용하면 된다.

 

promise 함수를 사용할 경우 위와 같은 코드를 작성할 수 있다.

이전과 같이 콜백 함수를 사용할 때, 함수를 중첩할 필요 없이 .then으로 연결하면 된다.

 

 

async / await

ES2017(ES8) 문법에서는 async / await을 통해 promise를 더 쉽게 사용할 수 있다.

async / await을 사용하려면 함수의 앞 부분에 async 키워드를 추가하고 해당 함수 내부에서 promise의 앞 부분에 await 키워드를 추가해주면 된다.

그 결과, promise 함수가 끝날 때까지 기다리고 결과 값을 변수에 넣을 수 있다.

 

이전의 코드와 다른 것은 이 코드에는 결과값이 50이상이어도 에러가 나지 않는다.

이전과 비슷한 코드이다. 1초가 지날 때마다 인자에 10이 추가된다. 해당 코드를 async과 await을 사용해서 작성한 것이다. 이전 코드보다 가독성이 좋다. function의 앞에 async을 붙이고 함수 내부에 await을 사용하여 순차적으로 작용하게 작성한 것이다. await이 걸린 promise는 async function의 실행을 일시 정지시키고 promise가 값을 반환하면 다시 이어서 실행한다. 이때의 예외 처리는 try-catch 문을 사용하면 된다.

 

이때까지 나온 비동기 처리 함수들은 다양한 상황에서 유용하다. 예를 들어, 서버에서 받아오는 데이터를 보여줄 때, 이 데이터를 다 받아오기도 전에 화면을 표시하게 되면 오류가 발생하거나 데이터의 일부가 손실된 상태로 화면이 표시될 수 있다. 그러나 promise 함수를 사용하는 것과 같이 비동기 처리를 하면 이와 같은 상황을 방지할 수 있다.

 

참조

• secho.log
• 코드,생각,글 저장소
• 김민준, 리액트를 다루는 기술[개정판], 길벗
• 레드윗러의 React 잘 써보기