콜백 지옥(Callback Hell)과 프로미스(Promise)를 이용한 해결법

콜백 지옥(Callback Hell)

콜백 지옥은 여러 비동기 연산을 순서대로 처리해야 할 때 발생하는 현상입니다. 각 비동기 연산이 완료된 후 다음 연산을 수행하기 위해 콜백 함수 내부에 또 다른 콜백 함수를 중첩해 사용하게 되면, 코드의 깊이가 깊어지면서 가독성이 떨어지게 됩니다. 이러한 현상을 "콜백 지옥"이라고 부릅니다.

콜백 지옥 예시:

예를 들어, 다음과 같은 시나리오를 생각해봅시다. 데이터를 가져온 후, 해당 데이터를 바탕으로 다른 데이터를 가져오고, 그 다음 또 다른 데이터를 가져오는 연쇄적인 요청이 필요한 경우입니다.

fetchFirstData(function(error1, data1) {
    if (error1) {
        console.error('Error:', error1);
    } else {
        fetchSecondData(data1, function(error2, data2) {
            if (error2) {
                console.error('Error:', error2);
            } else {
                fetchThirdData(data2, function(error3, data3) {
                    if (error3) {
                        console.error('Error:', error3);
                    } else {
                        console.log('Final Data:', data3);
                    }
                });
            }
        });
    }
});

위의 예시에서는 세 번의 비동기 요청을 연속적으로 수행합니다. 각 요청의 결과는 다음 요청의 입력으로 사용되며, 이로 인해 콜백 함수가 중첩되어 있습니다.

Promise를 사용하여 콜백 지옥 해결:

위의 콜백 지옥을 Promise를 사용하면 다음과 같이 개선할 수 있습니다.

fetchFirstData()
    .then(data1 => fetchSecondData(data1))
    .then(data2 => fetchThirdData(data2))
    .then(data3 => {
        console.log('Final Data:', data3);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Promise를 사용하면, 중첩된 콜백 구조 대신 then 메서드를 연속적으로 체인화하여 각 단계의 결과를 순차적으로 처리할 수 있습니다. 이로 인해 코드가 훨씬 깔끔해지며, 에러 처리도 중앙화된 catch 메서드를 통해 한 곳에서 관리할 수 있습니다.

이렇게 중첩된 콜백 함수는 코드의 가독성을 저해하고, 에러 핸들링을 복잡하게 만듭니다.

JavaScript Promise