콜백 지옥, 그리고 Promise의 필요성

콜백 지옥, 그리고 Promise의 필요성

자바스크립트에서 비동기 작업(예: 서버에서 데이터 받아오기, 파일 읽기 등)을 처리할 때, 예전에는 콜백(callback) 함수를 많이 사용했습니다. 하지만 콜백을 여러 번 중첩해서 사용하다 보면 코드가 복잡해지고 관리하기 어려워지는 콜백 지옥(callback hell) 문제가 발생합니다.

---

콜백 지옥이란?

콜백 지옥은 비동기 작업이 연속적으로 일어날 때 콜백 함수가 계속 중첩되어 코드가 오른쪽으로 점점 밀려나고, 읽기도, 유지보수도 어려워지는 현상입니다.

콜백 지옥 예시

getUser(userId, function(user) {
  getPosts(user, function(posts) {
    getComments(posts, function(comments) {
      console.log('모든 데이터를 다 가져왔어요!');
    });
  });
});

• 함수 안에 함수, 또 그 안에 함수… 이런 식으로 코드가 깊어집니다.
• 에러가 발생하면 어디서 처리해야 할지 헷갈리고, 코드 수정도 어렵습니다.

---

Promise란 무엇인가?

Promise는 비동기 작업의 성공 또는 실패 결과를 미래에 약속해 주는 자바스크립트 객체입니다.
즉, "지금은 결과가 없지만, 나중에 성공하거나 실패하면 알려줄게!"라는 약속이죠.

Promise의 세 가지 상태

• Pending(대기): 아직 결과가 정해지지 않은 상태
• Fulfilled(이행): 작업이 성공적으로 끝난 상태
• Rejected(거부): 작업이 실패한 상태

Promise 기본 사용법

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve("성공!");
  } else {
    reject("실패!");
  }
});

myPromise
  .then(result => console.log(result))   // 성공 시 실행
  .catch(error => console.error(error)); // 실패 시 실행

• resolve는 작업이 성공했을 때, reject는 실패했을 때 호출합니다.
• .then()으로 성공 결과를, .catch()로 실패 결과를 처리합니다.

---

Promise로 콜백 지옥 해결하기

Promise를 사용하면 콜백 지옥에서 벗어나, 코드를 일직선처럼 읽기 쉽게 만들 수 있습니다.

Promise 체이닝 예시

getUser(userId)
  .then(user => getPosts(user))
  .then(posts => getComments(posts))
  .then(comments => {
    console.log('모든 데이터를 다 가져왔어요!');
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

• 각 비동기 함수는 Promise를 반환합니다.
• .then() 을 이용해 결과를 순서대로 넘기고, 에러도 한 번에 처리할 수 있습니다.
• 코드가 훨씬 간결하고, 가독성이 좋아집니다.

---

정리

• 콜백 지옥은 콜백 함수가 중첩되어 코드가 복잡해지는 현상입니다.
• Promise는 비동기 작업의 결과를 미래에 약속해 주는 객체로, 콜백 지옥을 해결해 줍니다.
• Promise를 사용하면 then()과 catch()로 비동기 작업을 순차적으로 처리하고, 에러도 효율적으로 관리할 수 있습니다.

이렇게 Promise는 자바스크립트에서 비동기 코드를 더 쉽고, 읽기 좋게, 안전하게 만드는 핵심 도구입니다.