[JS] 아직도 Callback 지옥에있다고요? 벗어나요, 얼른..!

🚨 본 글은 callback의 개념을 알고있다는 전재하에 작성한 글입니다.

---

보기만해도 눈 아픔... (출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=love_junim&logNo=221042168323)

 

1. Callback 지옥 거기서 나오시라니까요,

JavaScript에서 비동기 처리를 위해 콜백(callback) 함수를 사용한다. 콜백 함수는 비동기 함수가 처리를 마친 후 실행되는 함수로, 해당 비동기 함수가 처리를 마친 후에 실행될 코드를 인자로 전달받는다. 하지만, 콜백 함수를 중첩해서 사용하다 보면 코드의 가독성이 떨어지고 유지보수가 어려워지는 문제가 발생할 수 있다. 이러한 상황을 "Callback Hell"이라고 한다.

 

예를 들어, 웹사이트에서 사용자가 주문한 상품을 서버로부터 받아와 화면에 출력하는 기능을 구현하고자 한다면, 이를 콜백 함수를 사용하여 구현하면 다음과 같이 중첩된 구조를 가지게 된다.

function getOrder(userId, callback) {
  ajaxRequest('https://example.com/orders?user_id=' + userId, function(response) {
    var orders = JSON.parse(response);
    callback(orders);
  });
}

function renderOrders(orders) {
  // 주문 목록을 화면에 출력
}

getOrder('1234', function(orders) {
  renderOrders(orders);
});

위 코드에서 getOrder() 함수는 ajaxRequest() 함수를 호출해 서버로부터 주문 데이터를 받아온다. 이후 받아온 데이터를 콜백 함수로 전달하여 처리한다. renderOrders() 함수는 전달받은 주문 데이터를 화면에 출력하는 역할을 한다.

하지만 위 코드는 콜백 함수를 중첩하여 사용하여 가독성이 떨어지고, 오류 발생 시 디버깅이 어렵다.

 

그래서 우리는 이러한 문제를 해결하기 위해 Promise를 사용하여 비동기 작업을 처리할 수 있다.

2. Promise란?

Promise는 콜백 함수의 문제점을 해결하기 위해 나온 개념이다. Promise는 비동기 작업이 완료될 때까지 기다린 후, 작업이 성공적으로 완료되면 결과를 반환하고, 실패하면 오류를 반환한다.

Promise는 세 가지 상태(state)를 가지는데, 다음과 같다.

• 대기(pending): Promise 객체가 생성된 상태. 아직 결과가 없으며 대기하고 있는 상태
• 이행(fulfilled): Promise 객체가 비동기 작업을 성공적으로 처리한 상태
• 거부(rejected): Promise 객체가 비동기 작업을 처리하지 못하고 실패한 상태

Promise 객체는 then() 메서드와 catch() 메서드를 가지고 있다. then() 메서드는 Promise가 이행(fulfilled)된 경우 호출되며, catch() 메서드는 Promise가 거부(rejected)된 경우 호출된다. 

 

아까 위에서 보았던 코드를 떠올려보자. 콜백 함수를 중첩하여 사용하여 가독성이 떨어지고, 오류 발생 시 디버깅이 어렵다. 이러한 문제를 해결하기 위해 Promise를 사용하여 비동기 작업을 처리할 수 있다.

바로 이렇게,

function getOrder(userId) {
  return new Promise(function(resolve, reject) {
    ajaxRequest('https://example.com/orders?user_id=' + userId, function(response) {
      var orders = JSON.parse(response);
      resolve(orders);
    });
  });
}

function renderOrders(orders) {
  // 주문 목록을 화면에 출력
}

getOrder('1234')
  .then(function(orders) {
    renderOrders(orders);
  })
  .catch(function(error) {
    console.error(error);
  });

위 코드에서 getOrder() 함수는 Promise 객체를 반환하도록 수정되었다. Promise 객체는 비동기 작업을 처리할 때 사용된다. resolve() 메소드는 Promise가 성공적으로 처리되었을 때 호출되며, 처리 결과를 전달한다. reject() 메소드는 Promise 처리 중 오류가 발생했을 때 호출되며, 오류 객체를 전달한다.

 

getOrder() 함수가 Promise 객체를 반환하므로, 이를 .then() 메소드를 사용하여 처리 결과를 전달받을 수 있다. catch() 메소드는 Promise 처리 중 오류가 발생했을 때 호출되며, 오류 처리를 담당한다.

 

이렇게 Promise를 사용하면 가독성이 좋아지며, 오류 발생 시 디버깅이 쉬워집니다. 그러니 아직도 callback지옥에 빠져있다면, Promise로 탈출하길..!