Promise와 콜백 패턴의 가장 큰 차이

연속적인 비동기 패턴을 다룰때 가장 전통적인 방식인 콜백 패턴의 단점을 보완하기 위해 Promise가 나왔다. Promise를 사용하면 코드의 indent가 계속 깊어지는 콜백 헬 문제를 해결하면서 코드를 좀 더 읽기 좋게 만든다는 점에서 아주 훌륭한 패턴이라고 할 수 있다. 근데 Promise가 진짜 유용한 이유는 따로 있다. 우선 콜백 패턴이 왜 복잡한지부터 살펴보자.

콜백 패턴의 복잡성

const add5 = (number, callback) => {
    setTimeout(() => callback(number + 5), 1000);
};

const add10 = (number, callback) => {
    setTimeout(() => callback(number + 10), 1000);
};

const add15 = (number, callback) => {
    setTimeout(() => callback(number + 15), 1000);
}

const log = (number) => {
    console.log(number);
}

add5(0, (number) => add10(number, (number) => add15(number, log)));

비동기 함수를 흉내내기 위해 setTimeout을 사용하였다. add5, add10, add15 세가지 함수 모두 1초뒤에 콜백함수를 실행시켜주는 비동기 함수이다.

 

비동기 함수 여러개가 서로 의존하고 있을때 가장 오래전부터 사용되던 방법이 콜백 패턴이다. add5를 실행하면 1초뒤에 add10이 실행되고 add10이 실행되고 1초뒤에 add15가 실행되고 add15가 실행되고 1초뒤에 30이라는 값이 로그에 찍힌다. 딱봐도 코드가 엄청 읽기 힘들고 복잡하다. 

 

add5 -> 1초뒤 -> add10 -> 1초뒤 -> add15 -> 1초뒤 -> log

 

이런 비동기 함수간의 의존성을 처리할때 콜백을 사용하는것은 코드의 유지보수성을 나쁘게 만들어 지양하는것이 좋다.

 

es6의 Promise가 탄생한 가장 큰 이유중 하나가 이런 단점을 극복하기 위함이다. 하지만 이것뿐만아니라 사실 더 중요한것은 비동기 작업을 객체로 다룸으로써 좀 더 유연한 비동기 처리가 가능하다는 점이다.

 

비동기 작업의 유연성

Promise는 객체이다. 비동기 작업의 상황을 pending, resolved, failed 3가지 상태로 묘사하고 값으로 할당이 가능한 객체의 형태로 표현된다. 

 

위 콜백 패턴을 그대로 Promise 체인을 활용해서 구현하면 다음과 같다.

const add5 = number =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(number + 5);
    }, 1000),
  );

const add10 = number =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(number + 10);
    }, 1000),
  );

const add15 = number =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(number + 15);
    }, 1000),
  );

const log = number => new Promise(resolve => setTimeout(() => console.log(number), 1000));

add5(0)
  .then(number => add10(number))
  .then(number => add15(number))
  .then(number => log(number));

then으로 연결된 Promise 체인이 코드를 훨씬 보기 좋게 만들어줬다. 코드의 depth를 깊게 만들지 않아서 콜백 패턴에 비해 더 유지보수성이 좋아졌다.

 

여기서 Promise의 장점이 끝나는게 아니다. 하나더있다. 다른 비동기 작업을 쉽게 추가하거나 수정하기가 쉽다.

 

예를들어서 add15 전에 add14라는 비동기 함수를 추가하고 싶다고 해보자.

 

콜백 패턴

add5(0, (number) => add10(number, (number) => add14(number, add15(number, () => log(number))));

콜백 패턴에서는 이처럼 a-> b-> c로 이어져있던 기존 코드를 일일이 찾아서 수정해야한다.

 

Promise 패턴

add5(0)
  .then(number => add10(number))
  .then(number => add14(number))
  .then(number => add15(number))
  .then(number => log(number));

 

딱봐도 차이가 느껴지지 않는가?? Promise패턴이 연속된 비동기 작업을 수정, 삭제, 추가하기 훨씬 편하고 유연하다.

 

뿐만아니라 콜백패턴은 비동기 작업이 실패했는지 성공했는지 대기중인지를 알려주지 않는다. 에러가 발생해야 실패한걸 알게 되고 대기중인지 실행중인지를 알 방법이 없다.

 

반면, Promise는 비동기 작업을 추상화 한 객체이므로 비동기 작업이 현재 어떤 상태인지를 쉽게 값으로 확인할 수 있다는 점에서도 장점이 있다.

 

결론

Promise는 콜백패턴보다 훨씬 유용하다.

 

그 이유는,

첫번째로 비동기 작업의 추가/수정의 유연함

두번째로 코드 유지보수성 증가이다.