Promise

개요

이전에 살펴봤던 콜백 지옥의 문제를 해결하기 위해 Promise라는 개념이 나왔다. 실제 쓰임과 동작도 그 이름 그대로다.

개념

const a = () => {
  setTimeout(()=> {
    console.log(1);
  }, 1000)
}

const b = () => console.log(2);

a();
b();

// 2
// 1

이전의 콜백 패턴을 프로미스를 사용해서 수정해보면…

const a = () => {
  return new Promise(resolve => {
    setTimeout(()=> {
    console.log(1)
    resolve()
  }, 1000)
  });
}

const b = () => console.log(2);

a().then(() => {b()})

중첩된 콜백을 작성해보면…

const a = () => {
  return new Promise(resolve => {
    setTimeout(()=> {
    console.log(1)
    resolve()
  }, 1000)
  });
}
const b = () => {
  return new Promise(resolve => {
    setTimeout(()=> {
    console.log(2)
    resolve()
  }, 1000)
  });
}
const c = () => {
  return new Promise(resolve => {
    setTimeout(()=> {
    console.log(3)
    resolve()
  }, 1000)
  });
}

const d = () => console.log(4);

a().then(() => {
  return b()
})

이렇게 작성했는데 여전히 콜백지옥과 같이 유지보수가 곤란한 구조가 만들어졌다.

프로미스는 메소드 체이닝 방식으로 이어서 작성할 수 있다. 프로미스가 반환되는 구조에선 then을 연속해서 사용할 수 있다.

a().then(() => {
  return b()
}).then(() => {
  return c()
}).then(() => {
  d()
})

이전의 콜백지옥보단 훨씬 정돈된 코드가 된다.
화삺표 함수 다음에 바로 리턴 키워드가 나오면 이를 생략할 수 있다. 한 번 더 정돈을 해보면…

a()
  .then(() => b())
  .then(() => c())
  .then(() => {
    d()
  })

a()
  .then(b)
  .then(c)
  .then(d)

이전의 계속해서 안으로 들어가던 콜백 지옥에서 메소드 체이닝 방식으로 단순해졌다.