Async Await 사용 시 주의사항 (퍼포먼스)

한줄요약 : 비동기 함수를 호출시점에는 await를 사용하지 않고 특정 변수에 담은 뒤, 해당 변수를 사용시에만 await을 붙여서 써라!

알다싶이 await 문법은 비동기 로직을 동기로직(순차처리)처럼 사용하기 위해 사용하는 문법이다.

그런데 만약 특정 로직이 순차적으로 처리되야 할 필요가 없다면?

예를들어 두명의 회원정보를 가져와서 하나의 배열로 리턴하는 list 함수가 있다고 가정해 보자

async function getUser(id) {
   return fetch("getuser");
}

async function getUserList() {
     let result1 = await getUser(1);
     let result2 = await getUser(2);
     return [result1, result2]
}

   

위와 같이 작성한 뒤 getUserList 함수를 실행한다면 
user 1 정보를 가져올때 까지 result2는 기다리고 있다가
user 1 정보를 가져온 뒤 result2에 user 2 정보를 가져오는 함수를 실행한다.

 

결과적으로 Javascript의 비동기 ( None blocking 동시성 )효을성을 사용하지 못하는 것이다.
하지만 아래와 같이 한다고 가정해 보자

async function getUser(id) {
   return fetch("getuser");
}

async function getUserList() {
     let result1 = getUser(1); // 비동기 함수를 호출시는 await를 빼서 비동기로 결과를 가져온다
     let result2 = getUser(2);
     let result_final = [await result1, await result2]; // 이미 가져온 Promise 객체를 꺼낼때(?) 만 await를 사용하여 꺼낸다
     return result_final
}

 

 

위와 같이 작성 시 비동기 함수를 호출시는 순차적으로 결과를 기다린 뒤 실행되는게 아니라 비동기로 실행된다.
따라서 최초 함수 호출시 result1 과 result2 에는 pending된 Promise 객체가 담겨있을 것이다.
하지만 result2는 result1이 완료될 때까지 기다릴 필요가 없기 때문에 실행시간은 이론적으로 절반정도 줄어들 것이다.

그렇다면 해당 결과를 순차적으로 배열에 담아 리턴해야 한다면?
여기서 핵심이 나온다. 비동기 호출로 return 받은 Promise 객체를 담은 변수 (result1,2)를 await 로 선언하여 
사용하면 (재할당, print, return 등 ) 해당 값을 동기 형태로 사용할 수 있다. 이것이 핵심!!