Promise와 Callback의 차이점을 설명해주세요

답변

Callback은 함수 실행 후 다시 호출되는 함수로, 비동기 작업 완료시 호출될 수 있습니다.

하지만 중첩될 경우 Callback Hell 문제를 일으킬 수 있습니다.

Promise는 비동기 작업의 성공, 실패를 처리하는 객체로, Callback보다 가독성이 좋고 체인형식으로 작업을 이어나갈 수 있습니다.

then, catch, finally를 사용해 비동기 작업의 흐름을 제어할 수 있습니다.

 

꼬리 질문

• Callback Hell이란 무엇인가요?
  • 이에 대한 해결책으로 앞서 말한 Promise나 async/await 방법들을 사용할 수 있습니다.
  • Callback Hell은 비동기 작업을 처리할 때, 여러 개의 중첩된 콜백 함수들이 순차적으로 호출되는 구조를 말합니다. 이로 인해 코드의 가독성이 떨어져, 유지보수나 디버깅이 어려워집니다.
• 체인 형식으로 작업한다는게 무슨 의미인가요?
  
  • 체인 형식으로 작업한다는 것은 Promise를 사용하면 비동기 작업이 순차적으로 실행될 때 콜백을 중첩하지 않고 then(), catch(), finally()를 통해 연속적으로 작업을 처리할 수 있다는 의미입니다.
  • 이를 통해 코드의 가독성을 높일 수 있습니다.

예제 코드

Callback Hell의 예제 코드

// 가정: 비동기 작업을 하는 함수들
function task1(callback) {
  setTimeout(() => {
    console.log('Task 1 완료');
    callback();
  }, 1000);
}

function task2(callback) {
  setTimeout(() => {
    console.log('Task 2 완료');
    callback();
  }, 1000);
}

function task3(callback) {
  setTimeout(() => {
    console.log('Task 3 완료');
    callback();
  }, 1000);
}

// Callback Hell: 작업을 순차적으로 실행하기 위해 콜백 중첩
task1(() => {
  task2(() => {
    task3(() => {
      console.log('모든 작업 완료');
    });
  });
});

위의 코드를 Promise로 변환

function task1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Task 1 완료');
      resolve();
    }, 1000);
  });
}

function task2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Task 2 완료');
      resolve();
    }, 1000);
  });
}

function task3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Task 3 완료');
      resolve();
    }, 1000);
  });
}

// Promise 체인으로 작업 이어가기
task1()
  .then(() => task2())
  .then(() => task3())
  .then(() => {
    console.log('모든 작업 완료');
  });