JavaScript 비동기 처리의 이해: Callback과 Promise

웹 어플리케이션 개발을 하다 보면, 데이터를 서버로부터 가져오거나, 큰 파일을 처리하는 등의 시간이 걸리는 작업을 수행해야 하는 경우가 많습니다. 이런 경우들을 효과적으로 다루기 위해 JavaScript에서는 비동기 처리를 제공하며, 그 중요한 구성 요소인 Callback과 Promise에 대해 알아보겠습니다.

Callback 함수란?

Callback 함수는 함수의 인자로 다른 함수(callback 함수)를 받아, 해당 함수를 특정 로직이 끝나고 실행하는 방식입니다. 아래는 Callback을 사용하는 간단한 예제입니다:

unction fetchData(callback) {
  // 비동기 처리 로직
  let data = "Hello, World!"; // 예시로, 데이터를 가져오는 비동기 함수라고 가정하겠습니다.
  callback(data);
}

fetchData(function(data) {
  console.log(data); // "Hello, World!"
});

Callback 방식은 간단한 로직에서는 효율적이지만, 비동기 로직이 복잡해질수록 코드의 깊이가 깊어지고 가독성이 떨어지는 문제가 있습니다. 이를 Callback Hell이라고 부릅니다.

 

그렇다면 Promise는?
Promise는 JavaScript에서 비동기 처리를 수행할 때 사용하는 객체입니다. Promise는 다음과 같은 세 가지 상태를 가집니다:

Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행): 비동기 처리가 완료되어 Promise가 결과 값을 반환한 상태
Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태
이러한 Promise의 상태는 Pending에서 Fulfilled 또는 Rejected로만 변경될 수 있으며, 한 번 변경된 상태는 다시 바뀌지 않습니다.

아래 코드는 Promise를 사용하는 간단한 예제입니다:

 

let promise = new Promise(function(resolve, reject) {
  // 비동기 처리 로직
  let data = fetchData(); // 예시로, 데이터를 가져오는 비동기 함수라고 가정하겠습니다.

  if (data) {
    resolve(data); // 비동기 처리 결과가 성공이면 resolve를 호출
  } else {
    reject(new Error("Failed to fetch data")); // 실패하면 reject를 호출
  }
});

// then 메소드로 Promise가 끝난 후의 결과값 또는 에러를 처리
promise.then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log(err);
});

 

Promise는 Callback Hell과 같은 문제를 해결하며, 비동기 로직을 보다 간결하고 가독성 좋게 작성할 수 있게 도와줍니다. 다음 번에는 Promise의 더 심화된 사용법과 async/await에 대해 다루도록 하겠습니다.

앞으로 비동기 처리에 대한 더 깊은 이해를 위해, 이 두 가지 비동기 처리 방식을 꼭 기억해두시길 바랍니다. Happy coding!