async & await / callback / promise

turnaroundwoo·2023년 2월 5일

11st Blogs

목록 보기

13/52

async / await 문법을 사용하면 promise(프로미스)를 좀 더 편하게 사용할 수가 있습니다.

일단 async/await에 대한 개념을 알아보기 전에 먼저 비동기 처리, 콜백 함수, promise에 대해 이해를 하고 있어야 합니다. (*예시가 섞인 자세한 내용을 원한다면 맨 아래의 출처 참고)

비동기 처리 란, 특정 코드의 연산이 끝날 떄까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JavaScript의 특성을 의미합니다. 멈추지 않고 다음 코드를 먼저 실행해버리기 때문에 특정 코드의 결과값이 제대로 나오지 않는 경우가 있습니다. 그렇다면, 이러한 경우를 어떻게 해결할 수 있을까요? 바로 callback(콜백) 함수를 이용하는 것입니다.
함수를 실행할 때 받게 되는 인자값으로 다양한 데이터를 받게 됩니다. 이러한 인자값에 함수 자체도 받을 수도 있는데, 이 때 이용되는 함수가 바로 callback(콜백) 함수 입니다.
이 callback(콜백) 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수가 있습니다.

비동기 처리 로직을 위해 연속해서 callback 함수를 사용하다보면 발생하는 문제가 있는데요. 바로 callback hell(콜백 지옥) 입니다.
콜백 안에 콜백을 계속 무는 형식으로, 이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵기 때문에 매우 비효율적인 코드 구조라고 할 수 있습니다.

✅ 비동기 처리를 위해 콜백 함수를 사용하긴 해야 하는데, 위와 같은 콜백 지옥을 해결하려면 어떻게 해야 할까요? 🤔

콜백 지옥을 해결하는 방법으로는 일반적으로 Promise나 Async가 있습니다.

Promise 란, JavaScript 비동기 처리에 사용되는 객체입니다.
promise를 사용할 때에는 promise의 states(상태)에 대해서도 알아야 하는데요. 여기서 말하는 states(상태) 란, promise의 처리 과정을 의미합니다.
new Promise()로 promise를 생성하고 종료되기까지 3가지의 상태를 갖습니다.

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

async / await 는 JavaScript의 비동기 처리 패턴 중 가장 최근에 나온 문법인데, 기존의 비동기 처리 방식인 callback 함수와 Promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환하는데, 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 promise를 반환하는 API 호출 함수입니다.