[javascript] 콜백 헬과 선호하는 패턴

15 Dec 2023

javascript

콜백 헬이란 무엇인가?
콜백 헬을 피하는 방법
Promise
async/await

콜백 헬과 선호하는 패턴

JavaScript로 비동기 코드를 작성하다 보면 콜백 헬(callback hell)이라는 문제와 마주치는 경우가 있습니다. 콜백 헬은 비동기 코드에서 콜백 함수를 중첩하여 사용할 때 코드가 복잡해지고 가독성이 떨어지는 현상을 말합니다. 콜백 헬은 코드를 유지보수하기 어렵게 만들며 버그 발생 가능성을 높일 수 있습니다.

콜백 헬이란 무엇인가?

콜백 헬은 다음 예와 같이 비동기 작업이 중첩되어 발생합니다.

getData(function(data) {
    getMoreData(data, function(moreData) {
        getMoreDataAgain(moreData, function(evenMoreData) {
            // ... 코드 ...
        });
    });
});

위와 같이 콜백 함수가 중첩되어 있는 코드는 가독성이 나쁘며 여러 비동기 작업이 발생할 경우에는 더욱 복잡해질 수 있습니다.

콜백 헬을 피하는 방법

콜백 헬을 피하기 위해 Promise나 async/await 패턴을 사용할 수 있습니다.

Promise

getData()
    .then(function(data) {
        return getMoreData(data);
    })
    .then(function(moreData) {
        return getMoreDataAgain(moreData);
    })
    .then(function(evenMoreData) {
        // ... 코드 ...
    })
    .catch(function(error) {
        // 에러 처리
    });

Promise는 비동기 작업을 순차적으로 처리하고 에러를 쉽게 처리할 수 있도록 해줍니다.

async/await

async function fetchData() {
    try {
        const data = await getData();
        const moreData = await getMoreData(data);
        const evenMoreData = await getMoreDataAgain(moreData);
        // ... 코드 ...
    } catch (error) {
        // 에러 처리
    }
}

async/await는 Promise를 기반으로 하며, 코드를 더 읽기 쉽고 순차적으로 작성할 수 있게 해줍니다.

콜백 헬을 피하고자 하는 모든 개발자는 이러한 패턴을 잘 습득하여 사용하는 것이 좋습니다.