[개발 지식] 콜백지옥 해결하는 방법

콜백 지옥(Callback hell) ?

 

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다.

$.get('url', function (response) {
    parseValue(response, function (id) {
        auth(id, function (result) {
            display(result, function (text) {
                console.log(text);
            });
        });
    });
});

 

웹 서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩,

사용자 인증 등을 처리해야 하는 경우가 있다.

만약 이 모든 과정을 비동기로 처리해야 한다고 하면,

위와 같이 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하게 된다.

 

이러한 코드 구조는 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다.

이와 같은 코드 구조를 콜백 지옥이라고 한다.

 

 

 

 

해결 방법 ?

 

1. 기명 함수로 전환 :

기명함수로의 변환은 코드의 가독성을 높인다는 장점이 있지만, 일회성 함수를 전부 변수에 할당해야 하는 것이 반복되고 복잡하여 좋은 방법은 아님.

 

 

2.  promise 사용:

ES6에 등장한 promise를 사용할 수도 있다.

new연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백함수는 호출할때 바로 실행되지만,

그 내부에 resolve 또는 rejected 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 다음으로 넘어가지 않는다.

 

 

3. promise + async/await: 

ES2017에는 가독성이 뛰어나면서도 작성법이 간단한 async/await 기능이 추가되었다. 

비동기작업을 하고자하는 함수앞에 async를 표시하고 함수 내부에서 실질적으로 비동기 작업이 필요한 위치마다

await를 표기하면 자동적으로 await 뒤의 내용을 promise로 전환하고 해당내용이 resolve된 이후에야 다음으로 진행한다. promise then과 같은 원리이다.