#22 자바스크립트 Promise

자바스크립트는 비동기 처리를 위해 다양한 방법을 제공합니다. 그중 Promise는 비동기 작업을 관리하고 체인 방식으로 코드를 구조화하는 데 있어 중요한 역할을 합니다. 콜백 지옥(Callback Hell) 문제를 해결하고, 보다 직관적인 코드 작성이 가능하게 해주어 자바스크립트에서 널리 사용됩니다.

이 글에서는 Promise의 개념과 함께 장점, 단점, 주의할 점을 설명하고, 관련된 예제를 통해 Promise를 어떻게 사용하는지 살펴보겠습니다.

Promise란?

Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)를 처리하기 위한 객체입니다. 주어진 작업이 완료되면 결과 값이 반환되거나 에러가 발생할 수 있습니다. Promise는 대기 중(Pending), 이행됨(Fulfilled), 거부됨(Rejected) 이라는 세 가지 상태를 가집니다.

• 대기 중(Pending): 비동기 작업이 아직 완료되지 않은 상태.
• 이행됨(Fulfilled): 작업이 성공적으로 완료된 상태.
• 거부됨(Rejected): 작업이 실패한 상태.

Promise는 아래와 같이 생성할 수 있습니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행합니다.
  if (/* 작업이 성공하면 */) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

Promise 예제

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;

    if (success) {
      resolve('작업 성공!');
    } else {
      reject('작업 실패!');
    }
  }, 2000);
});

myPromise
  .then((result) => {
    console.log(result); // 2초 후 '작업 성공!' 출력
  })
  .catch((error) => {
    console.log(error);
  });

이 코드는 2초 후에 resolve 또는 reject가 호출되어 결과를 출력합니다.

---

Promise의 장점

1. 가독성 향상: then, catch, finally 메서드를 사용하여 비동기 작업을 순차적으로 실행할 수 있으므로 콜백 지옥을 피할 수 있습니다.
2. 비동기 흐름 관리: 여러 개의 비동기 작업을 순차적으로 처리하거나, 병렬로 처리한 후 결과를 모아서 처리하는 것이 가능해집니다.
3. 에러 처리: 비동기 작업에서 발생한 에러를 한 곳에서 처리할 수 있는 장점이 있습니다.

콜백 지옥을 피한 Promise

// 콜백 지옥 방식
setTimeout(() => {
  console.log('첫 번째 작업 완료');
  setTimeout(() => {
    console.log('두 번째 작업 완료');
    setTimeout(() => {
      console.log('세 번째 작업 완료');
    }, 1000);
  }, 1000);
}, 1000);

// Promise 방식
const firstTask = () => new Promise((resolve) => setTimeout(() => resolve('첫 번째 작업 완료'), 1000));
const secondTask = () => new Promise((resolve) => setTimeout(() => resolve('두 번째 작업 완료'), 1000));
const thirdTask = () => new Promise((resolve) => setTimeout(() => resolve('세 번째 작업 완료'), 1000));

firstTask()
  .then((message) => {
    console.log(message);
    return secondTask();
  })
  .then((message) => {
    console.log(message);
    return thirdTask();
  })
  .then((message) => {
    console.log(message);
  });

---

Promise의 단점

1. 구현의 복잡성: 간단한 작업에 대해 Promise를 사용하면 코드가 오히려 복잡해질 수 있습니다.
2. 디버깅 어려움: 비동기 작업에서 발생하는 에러는 콜 스택에 남지 않기 때문에 디버깅이 어려울 수 있습니다.

---

Promise 사용 시 주의할 점

1. 항상 catch로 에러를 처리해야 함: 비동기 작업 중 발생하는 에러는 catch에서 처리하지 않으면 예외가 발생하지 않고 무시될 수 있습니다.
2. 비동기 작업이 중첩될 경우 주의: 여러 비동기 작업이 중첩되면 다시 콜백 지옥에 빠질 수 있습니다. 이를 피하기 위해서는 async/await을 사용하는 것이 좋습니다.

catch로 에러 처리

const promiseWithError = new Promise((resolve, reject) => {
  setTimeout(() => reject('작업 실패!'), 1000);
});

promiseWithError
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(error); // 에러 발생 시 '작업 실패!' 출력
  });

---

결론

Promise는 자바스크립트에서 비동기 작업을 처리하는 매우 중요한 도구입니다. 콜백 함수 기반의 비동기 처리 방식보다 가독성도 높이고, 에러 처리도 체계적으로 할 수 있어 많은 개발자들이 선호합니다. 그러나 복잡한 작업에 대해 남용할 경우 오히려 코드가 복잡해질 수 있으므로, 적절하게 사용해야 합니다.