콜백지옥과 Promise에 대해

자바스크립트 어느 정도 공부해보시거나 써보신 분들은 콜백지옥이라는 말 심심치 않게 들으셨을 겁니다. 이런 걸 말하는거죠.

setTimeout(function(){
  console.log('ddok');
  setTimeout(function(){
    console.log('ddak');
    setTimeout(function(){
      console.log('end!!!');
    }, 100);
  }, 100);
}, 100);

피라미드를 보는 거같은 이 복잡함.. 다들 상당히 거슬리실거에요. 이런 상황이 안올거란 법은 없지만, 그래도 기왕이면 가독성을 해결하는게 좋겠죠.

ES 6 문법 중에 Promise 라는 것이 있는데, 이런 상황을 어느정도 해결할 수 있다고 해요.

 

1. Promise

영어로는 이렇게 설명하고 있습니다.

"Promises are a first class representation of a value that may be made available in the future."

직역하면, 미래에 만들어 질 수 있는 값에 대한 클래스 표현이다..?

예제 코드를 보면서 설명하죠.

// ES6 문법 with Promise
function msgAfterTimeout (msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
    })
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
    msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
    console.log(`done after 300ms:${msg}`)
})

// ES5 (기존 문법)
function msgAfterTimeout (msg, who, timeout, onDone) {
    setTimeout(function () {
        onDone(msg + " Hello " + who + "!");
    }, timeout);
}
msgAfterTimeout("", "Foo", 100, function (msg) {
    msgAfterTimeout(msg, "Bar", 200, function (msg) {
        console.log("done after 300ms:" + msg);
    });
});

//setTimeout 함수 동작 예상 - 절대 정확하지 않습니다. 그냥 단순하게 코드화한거 뿐입니다.
function setTimeout(callback, time){
    wait(time);
    callback();
}

기존과 비교해보면, Promise는 콜백을 담고 있는 상태처럼 보입니다. 그래서 함수 리턴으로 Promise를 던지면 함수 실행 이후 then() 메소드로 콜백 호출을 이어가는거죠.

그럼 위의 예제를 돌려보겠습니다.

Promise 선언의 setTimeout에서 콜백부분이 resolve를 실행하게 되어있습니다. 여기서 보기에 저 resolve는 메시지를 이어서 나올 then 메소드에 첫번째 인자로 넘겨주는 역할인거 같습니다. 그리고 Promise안의 콜백이 제대로 실행되지 않으면 reject를 실행하도록 setTimeout 다음줄에 추가해야 합니다.

이걸로 볼때 Promise는 콜백 + 상태를 자바스크립트 클래스로 구체화한거라고 생각하시면 되겠습니다.

그리고 Promise는 Angular나 React같이 front-end를 위한 자바스트립트 프레임워크에서 많이 쓰이는 문법입니다. 프론트엔드쪽 일하시려면 이 정도는 최소한으로 아시는게 좋을거에요.

2. 레퍼런스

Promise 상태도 구분해서 부르는거 같습니다. 다만, 제가 설명하기에는 한계가 있을거 같고, 대신 참고한 자료를 남깁니다.

ES6 - Promises

ES6 - Promise Usage (es6-features.org)

JS promise 패턴 구현해보기