Async / await

async, await

# 시작하며

오늘은 리액트를 사용하여 웹 개발을 진행할 때, 유용하게 사용되는 async와 await에 대해 알아보자. 해당 기능을 올바르게 알고 제대로 사용할 줄 알면, 코드에 대한 오류를 큰 폭으로 줄일 수 있고 예상치 못한 변화에 대비할 수 있다.

 

 

# async, await

async / await은 *Promise를 더욱 쉽게 사용할 수 있도록 해 주는 문법이다. 이러한 문법을 사용하기 위해서는, 함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 promise의 앞부분에 await 키워드를 추가해 주어야 한다.

*Promise - JS에서 비동기 처리에 활용되는 객체. 주로 웹 서비스 구현 시 데이터 통신을 위해 활용됨.

export const editFaq = createAsyncThunk("contents/editFaq", async (params) => {
 
  const res = await api.post("/faq/editFAQ", params);
  if (res.data.ok) {
    console.log(res);
    return res.data;
  } else {
    console.log(res);
  }
});

다음은 api를 호출하는 상황에서 사용된 async, await 예시 코드이다. 앞서 언급한 것과 같이 함수 앞부분에 async 키워드를 추가하고, 함수 내부에 await을 사용해 주었다.

 

 

# 비동기

그렇다면 위와 같이 async와 await을 사용하는 이유인 즉 비동기 작업이란 무엇일까?

웹 앱을 개발하다 보면, 어떠한 작업을 수행하고 처리하는데, 사용하는 라이브러리마다 코드마다 모두 다르게 작용한다. 그리하여 빠르게 처리되는 작업이 있는 반면, 시간이 걸리는 작업이 있다. 가령 위 코드와 같이 api를 호출하는 경우에는 데이터 송수신이 발생하기 때문에 네트워크 송수신 과정에서 딜레이가 발생하게 된다. 

 

이렇게 딜레이가 발생하게 되면 즉, 작업을 동기적으로 처리하면, 요청이 끝날 때까지 기다리는 시간 동안 작업이 중지되기 때문에, 다른 작업에 대한 연산을 진행할 수 없다. 하지만 비동기적으로 처리하면 웹 앱이 멈추지 않고, 동시에 여러 요청을 처리할 수 있어 기다리는 과정에서도 다른 함수를 호출하거나 연산을 진행할 수 있다.