콜백 지옥

 

콜백이 중첩될 때의 가독성 저하

 

콜백지옥(callback hell)은 자바스크립트에서 비동기 작업을 처리할 때 콜백 함수를 중첩해서 사용하는 것을 말한다.

 

예시 코드를 보면 다음과 같다.

const fetchData = (data) => {
	setTimeout(() => {
    	data(null, "mouse");
    }, 1000)
};

const processData = (data, callback) => {
	setTimeout(() => {
    	callback(null, `${data} 진행중`);
    }, 1000)
};

const saveData = (data, callback) => {
	setTimeout(() => {
    	data(null, `${data} 저장됨`);
    }, 1000)
};

 

위 코드에는 비동기 작업을 수행하면서 콜백 함수를 인자로 받는 함수 세 개가 있다. 이제 이 함수들로 콜백지옥을 만들어보면 다음과 같다.

fetchData((err, data1) => {
	if (err) {
    	console.error(err);
        return;
    }
    processData((data1, (err, data2) => {
    	if (err) {
        	console.error(err);
            return;
        }
        saveData((data2, (err, result) => {
        	if (err) {
            	console.error(err);
                return;
            }
            console.log(result)
        });
    });
});

 

위의 각 함수가 꼬리를 물며 실행되고 있다. 그런데 점점 오른쪽으로 밀리고 있다. 

 

이처럼 콜백지옥이 되면 코드가 오른쪽으로 밀리며 가독성이 떨어지게 되고, 한 눈에 보기에도 힘들다.

또, 각 단계마다 에러처리를 할 때 코드가 복잡해지며, 코드 수정이나 확장이 어렵다는 특징이 있다.

 

이러한 콜백지옥을 방지하기 위해 Promise가 나왔고, 이 Promise를 기반으로 하는 async-await 문법을 사용하여 깔끔한 비동기 코드를 작성할 수 있다.