<aside> 💡 간단하게 말해서 네트워크 요청이나 setTimeout과 같은 시간이 걸리는 작업을

응답을 받을때까지 기다렸다가 전달 받은 응답 데이터를 처리하기 위해 사용한다.

</aside>

비동기 작업 처리 방법

<aside> 💡 비동기 작업을 처리하려면 아래와같이 콜백안에 콜백을 넣어서 구현할 수 있다.

하지만 이러한 작업은 너무 여러번 중첩되어 콜백 지옥이 형성된다.

function increase(number) {
  const promise = new Promise((resolve, reject) => {
    // resolve는 성공, reject는 실패
    setTimeout(() => {
      const result = number + 10;
      if (result > 50) {
        // 50보다 높으면 에러 발생시키기
        const e = new Error('NumberTooBig');
        return reject(e);
      }
      resolve(result); // number 값에 +10 후 성공 처리
    }, 1000);
  });
  return promise;
}...

</aside>

Promise

<aside> 💡 이러한 콜백지옥 같은 코드가 형성되지 않게 하기위해 ES6에서 새로 도입된 기능이다.

아래와 같은 방법으로 .then으로 사용하기 때문에 콜백 지옥에서 벗어날 수 있다.

increase(0)
  .then(number => {
    // Promise에서 resolve된 값은 .then을 통해 받아 올 수 있음
    console.log(number);
    return increase(number); // Promise를 리턴하면
  })
  .then(number => {
    // 또 .then으로 처리 가능
    console.log(number);
    return increase(number);
  })...

"리액트를 다루는 기술" 중에서
김민준

</aside>