Callback과 Async/Await 개요 및 차이점

KUKJIN LEE • 3개월 전 작성

1. Callback

Callback 함수는 자바스크립트에서 비동기 작업을 처리하기 위한 오래된 방식 중 하나입니다. 함수가 실행된 후 그 결과를 이용해서 다른 함수를 호출할 때 사용하는 방식입니다. 이는 주로 파일 읽기, HTTP 요청, 타이머와 같은 비동기 작업을 처리하는 데 사용됩니다.

Callback의 예시 코드

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: "John", age: 30 };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log("Received data:", data);
});

// 극단적 예시
doSomething((result1) => {
  doSomethingElse(result1, (result2) => {
    doThirdThing(result2, (result3) => {
      console.log('Final result:', result3);
    });
  });
});

위 예시에서 fetchData 함수는 비동기 작업을 실행하고, 1초 후에 데이터를 받아서 callback 함수로 전달합니다.

Callback 사용 시 중첩된 구조로 인해 복잡하고 유지보수가 어려워집니다.

2. Async/Await

Async/Await는 ECMAScript 2017(ES8)에서 도입된 비동기 작업을 처리하는 새로운 방식입니다. Callback이나 Promise를 사용하는 것보다 가독성이 훨씬 좋아졌고, 동기식 코드처럼 비동기 작업을 처리할 수 있습니다.

Async/Await의 기본 구조

async: 함수 앞에 붙여 비동기 함수를 정의합니다.
await: 비동기 작업이 완료될 때까지 기다리는 키워드입니다. 이 키워드를 사용하면 Promise의 결과가 반환될 때까지 다음 코드를 실행하지 않고 기다립니다.

Async/Await의 예시 코드

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = { name: "John", age: 30 };
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log("Received data:", data);
}

getData();

최근 트렌드

Modern JavaScript에서 Async/Await의 선호

비동기 처리를 위해 JavaScript 개발 커뮤니티는 Async/Await을 선호하는 경향이 강해졌습니다. 이는 다음 이유들 때문입니다:

가독성: 동기식 코드처럼 보이기 때문에 개발자가 코드를 읽고 유지보수하기가 쉽습니다. 복잡한 비동기 처리를 단순하게 할 수 있어 개발 생산성이 크게 향상됩니다.
에러 처리: try/catch 구문을 사용하면 비동기 코드에서 발생하는 에러를 처리하는 것이 더욱 직관적입니다.
Promise 기반: Async/Await은 Promise를 기반으로 하며, 기존의 Promise 체계를 잘 활용하면서도 그보다 더 직관적인 코드 작성이 가능합니다.

Promise와의 조합

Async/Await은 사실상 Promise 위에서 동작하기 때문에, 최신 JavaScript 코드에서는 여전히 Promise와 Async/Await의 조합이 흔하게 사용됩니다. Promise의 여러 작업을 await으로 직관적으로 처리할 수 있고, 에러 처리도 더 명확해졌습니다.

Callback 사용의 감소

Callback 방식은 여전히 일부 구형 API나 매우 간단한 비동기 작업에서 사용될 수 있지만, 현대 개발에서는 거의 사용되지 않으며, 복잡한 비동기 흐름을 관리하는 데 적합하지 않다는 인식이 강해지고 있습니다.

결론

Callback은 오래된 방식으로, 중첩된 코드로 인한 복잡성을 유발하는 단점이 있습니다. 반면, Async/Await은 가독성과 유지보수성이 뛰어나며, 최근 JavaScript의 비동기 처리를 위한 표준적인 방법으로 자리잡았습니다. 대부분의 최신 자바스크립트 프로젝트는 Async/Await을 사용해 비동기 처리를 구현하고 있으며, 이는 최신 트렌드로서 널리 채택되고 있습니다.