📞 한 눈에 정리하는 JS 비동기 3단계: Callback, Promise, Async/Await

자바스크립트는 싱글 스레드로 동작하는 언어이다. 따라서 한 번에 하나의 작업만 처리할 수 있다. 하지만 우리가 웹서핑을 할 때 이미지를 불러오면서 동시에 클릭도 할 수 있는 이유는 바로 비동기 처리 덕분이다.

자바스크립트에서 이 비동기 처리가 어떻게 발전해 왔는지 흐름을 알아보자.

1. 비동기의 시작: 콜백 함수(Callback)

콜백 함수는 특정 작업이 끝난 뒤에 실행하기 위해 나중에 호출될 함수를 인자로 넘겨주는 것을 의미한다. 자바스크립트는 싱글 스레드 언어이기 때문에 오래 걸리는 작업(네트워크 요청, 타이머 등)을 비동기적으로 처리하기 위해 콜백을 사용한다.

function fetchUser(id, callback) {
  console.log('1. 유저 찾기');
  
  setTimeout(() => {
    const user = { id: id, name: 'BlueCool' };
    callback(user);
  }, 2000);
  
  console.log('2. 다음 작업 수행');
}

fetchUser(1, (user) => {
  console.log('3. 유저 정보: ', user);
});​

위 코드가 실행되면 먼저 fetchUser가 실행되고 setTimeout을 만나는 순간 자바스크립트 엔진은 타이머를 브라우저(Web API)에 맡긴다.

이후 자바스크립트는 바로 다음 줄인 '2. 다음 작업 수행'을 먼저 출력 후 2초가 지나면 브라우저가 콜백 함수를 실행 큐에 넣어 유저 정보가 출력된다.

콜백의 한계: 콜백 지옥 (Callback Hell)

콜백은 유용하지만 비동기 작업이 연속적으로 필요할 때 치명적인 단점이 존재한다. 이를 흔히 '콜백 지옥'이라고 부른다.

1) 가독성 파괴
데이터를 가져오고 그 데이터로 다른 요청을 하고 또 그 결과로 무언가를 해야 할 때 코드는 오른쪽으로 끝없이 밀려나는 상황이 발생한다.

// 콜백 지옥
fetchUser(1, (user) => {
  fetchPosts(user.id, (posts) => {
    fetchComments(posts[0].id, (comments) => {
      renderUI(comments, () => {
        console.log('화면 업데이트...');
      });
    });
  });
});

2) 에러 처리의 어려움
콜백 방식은 에러 처리가 매우 번거롭다. 각 단계의 콜백 함수마다 에러 발생 시 처리할 로직을 중복해서 작성해야 하며 에러가 어디서 시작되었는지도 추적하기가 매우 힘들다.

3) 제어권의 역전 (Inversion of Control)
구조적으로 콜백을 다른 함수(ex: 외부 라이브러리)에 넘겨주는 순간, 그 함수가 내 콜백을 언제, 어떻게, 몇 번 실행할지에 대한 제어권이 상대방에게 넘어가 버린다.

이는 만약 외부 시스템의 오류로 내 콜백이 두 번 실행되거나 혹은 아예 실행되지 않는다면 프로그램에 치명적인 오류가 생길 수 있다.

이러한 단점들을 극복하기 위해 등장한 것이 바로 Promise이다.

2. 프로미스(Promise)

프로미스는 콜백 지옥을 해결하기 위해 ES6에서 도입된 비동기 작업의 결과를 담는 객체이다. 작업이 끝난 후 성공 혹은 실패의 결과를 돌려준다는 약속을 의미한다.

*프로미스의 3가지 상태 (Lifecycle)
프로미스는 작업의 진행 상황에 따라 세 가지 상태를 가진다.

• Pending(대기) - 비동기 로직이 아직 완료되지 않은 초기 상태
• Fulfilled(이행) - resolve()가 호출되어 작업이 성공적으로 끝난 상태
• Rejected(거부) - reject()가 호출되어 작업 중 오류가 발생한 상태

const getData = new Promise((resolve, reject) => {
  const success = true;
  if (success) resolve("성공 데이터");
  else reject("에러 발생");
})​;

getData
  .then(data => console.log(data)) // 성공 시 실행
  .catch(error => console.log(error)) // 실패 시 실행
  .finally(() => console.log("종료")); // 결과와 상관없이 무조건 실행

자바스크립트 엔진은 프로미스 객체 내부에 우리가 직접 접근할 수 없는 Internal Slots를 두어 상태를 관리한다.

• [[PromiseState]]: 현재 상태(pending, fulfilled, rejected)를 저장한다.
• [[PromiseResult]]: resolve()나 reject()에 넘겨준 결과 데이터가 담긴다.

new Promise의 인자로 받는 resolve와 reject는 엔진이 제공하는 스위치이다.

• resolve(data) 호출 -> 상태를 fulfilled로 변경 + [[PromiseResult]]에 데이터 저장
• reject(error) 호출 -> 상태를 rejected로 변경 + [[PromiseResult]]에 에러 정보 저장

프로미스에 담긴 데이터를 promise.data처럼 바로 꺼낼 수 없는 이유는 비동기성 때문이다. 코드가 실행되는 상태에서는 데이터가 아직 도착하지 않았을 가능성이 크기 때문에 .then()을 사용한다.

.then()은 객체의 상태가 fulfilled가 되는 순간 데이터를 꺼내 이 함수를 실행해달라고 미리 예약하는 역할을 수행한다.

핵심은 한번 Fulfilled 나 Rejected 상태가 되면 절대 다른 상태로 변하지 않는다는 점이다. 이는 콜백 방식에서 발생할 수 있는 중복 실행과 같은 문제를 원천 차단한다.

프로미스 체이닝 (Promise Chaining)

프로미스의 가장 큰 장점은 .then()을 통해 비동기 작업을 연결할 수 있다는 점이다. 이를 통해 콜백 지옥의 깊은 들여 쓰기를 위에서 아래로 흐르는 선형적인 코드로 바꿀 수 있다.

fetchUser(1)
  .then(user => fetchPosts(user.id)) // 유저를 가져온 후 포스트 호출
  .then(posts => fetchComments(posts[0].id)) // 포스트를 가져온 후 댓글 호출
  .then(comments => renderUI(comments)) // 모든 데이터가 준비되면 화면 렌더링
  .catch(error => console.error(error)) // 중간 어디서든 에러가 나면 여기서 처리
  .finally(() => console.log('작업 완료'));

콜백 함수의 단점이었던 가독성과 에러 처리를 모두 해결할 수 있다. 또한 자바스크립트의 표준 내장 객체이므로 fetch, axios 등 현대적인 라이브러리들은 모두 이 프로미스를 기반으로 동작한다.

3. 비동기의 완성: Async & Await

프로미스를 통해 콜백 지옥을 해결하였지만 .then() 체이닝이 길어지면 여전히 코드의 흐름을 한눈에 파악하기 어려울 때가 있다. 이를 해결하기 위해 ES8에 등장한 것이 바로 async/await이다.

비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해주는 편리한 문법적 설탕(Syntactic Sugar)이다.

*핵심 개념

• async: 함수 앞에 붙이며, 이 키워드가 붙은 함수는 항상 프로미스를 반환한다.
• await: async 함수 내부에서만 사용 가능하며 프로미스가 settled(이행 또는 거부) 상태가 될 때까지 함수의 실행을 잠시 일시 정지한다.

async function processData() {
  try {
    // await를 사용하여 비동기 결과를 변수에 직접 할당
    const user = await fetchUser(1); // 1. 유저 정보 도착까지 대기
    const posts = await fetchPosts(user.id); // 2. 포스트 로드까지 대기
    console.log(posts);
  } catch (error) {
    // .catch() 대신 try-catch 문으로 에러 처리
    console.error('에러 발생: ', error);
  } finally {
    console.log('모든 작업 종료');
  }
}

앞에서 다뤘던 .then()이 데이터가 오면 실행하라는 예약 시스템이었다면 await는 프로미스가 fulfilled 상태가 될 때까지 기다렸다가 [[PromiseResult]]에 담긴 값을 그 자리에서 바로 꺼내주는 역할을 한다.

덕분에 번거로운 콜백 함수를 쓰지 않고도 비동기 데이터를 일반 변수에 담듯이 사용할 수 있다.