Promise와 콜백 지옥(CallBack Hell)

안녕하세요! 오늘은 자바스크립트의 비동기 처리에서 중요한 개념인 Promise와 콜백 지옥(Callback Hell)에 대해 알아보겠습니다. 이 두 가지 개념을 이해하면 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

Promise와 콜백 지옥(CallBack Hell)

콜백 함수와 콜백 지옥

콜백 함수란?

콜백 함수는 다른 함수의 인수로 전달되어 특정 작업이 완료된 후 호출되는 함수입니다. 자바스크립트에서 비동기 작업을 처리하기 위해 자주 사용됩니다.

콜백 지옥이란?

콜백 지옥은 여러 비동기 작업을 중첩된 콜백 함수로 처리할 때 발생하는 코드의 가독성과 유지보수성 문제를 말합니다. 아래 예제를 통해 콜백 지옥이 무엇인지 살펴보겠습니다.

콜백 지옥 예제

function fetchData(callback) {
    setTimeout(() => {
        console.log('Data fetched');
        callback();
    }, 1000);
}

function processData(callback) {
    setTimeout(() => {
        console.log('Data processed');
        callback();
    }, 1000);
}

function saveData(callback) {
    setTimeout(() => {
        console.log('Data saved');
        callback();
    }, 1000);
}

fetchData(() => {
    processData(() => {
        saveData(() => {
            console.log('All done');
        });
    });
});

위 코드는 비동기 작업이 중첩되어 읽기 어렵고, 에러 처리가 복잡해지는 문제가 있습니다. 이러한 코드 구조를 콜백 지옥이라고 합니다.

Promise

Promise란?

Promise는 자바스크립트에서 비동기 작업을 처리하기 위해 도입된 객체입니다. 비동기 작업의 완료 또는 실패를 나타내는 값 또는 객체입니다. Promise는 콜백 지옥을 해결하기 위한 깔끔하고 직관적인 방법을 제공합니다.

Promise의 상태

• Pending: 초기 상태, 아직 완료되지 않음.
• Fulfilled: 작업이 성공적으로 완료됨.
• Rejected: 작업이 실패함.

Promise 사용 예제

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data fetched');
            resolve();
        }, 1000);
    });
}

function processData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data processed');
            resolve();
        }, 1000);
    });
}

function saveData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data saved');
            resolve();
        }, 1000);
    });
}

fetchData()
    .then(() => processData())
    .then(() => saveData())
    .then(() => {
        console.log('All done');
    })
    .catch((error) => {
        console.error(error);
    });

위 코드에서는 각 비동기 작업이 Promise 객체를 반환합니다. then 메서드를 사용하여 순차적으로 비동기 작업을 처리할 수 있으며, catch 메서드를 사용하여 에러를 처리할 수 있습니다.

Promise의 장점

1. 가독성 향상: 콜백 지옥을 해결하고 코드의 가독성을 높입니다.
2. 에러 처리: catch 메서드를 사용하여 체이닝된 모든 비동기 작업의 에러를 한 곳에서 처리할 수 있습니다.
3. 유연성: 여러 개의 비동기 작업을 동시에 실행하거나, 특정 순서대로 실행할 수 있습니다.

async/await

async/await란?

async/await는 Promise를 더 간결하고 동기적으로 보이게 작성할 수 있는 문법입니다. async 키워드는 함수가 Promise를 반환하도록 하고, await 키워드는 Promise가 처리될 때까지 기다립니다.

async/await 예제

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data fetched');
            resolve();
        }, 1000);
    });
}

function processData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data processed');
            resolve();
        }, 1000);
    });
}

function saveData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data saved');
            resolve();
        }, 1000);
    });
}

async function handleData() {
    try {
        await fetchData();
        await processData();
        await saveData();
        console.log('All done');
    } catch (error) {
        console.error(error);
    }
}

handleData();

async/await를 사용하면 비동기 코드를 마치 동기 코드처럼 작성할 수 있어 가독성이 더욱 높아집니다.

결론

콜백 함수와 콜백 지옥 문제를 이해하고, 이를 해결하기 위한 Promise와 async/await의 사용법을 익히는 것은 자바스크립트 비동기 처리에서 매우 중요합니다. Promise는 콜백 지옥을 해결하고, 가독성과 유지보수성을 높이며, async/await는 이를 더 간결하고 직관적으로 작성할 수 있게 도와줍니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.