JavaScript Promise Pattern

2024-05-23

shine1092

JavaScript는 본질적으로 비동기적(asynchronous)입니다.

이는 웹 브라우저 환경에서 사용자 인터페이스를 블로킹(blocking)하지 않으면서 다양한 작업을 처리할 수 있게 해줍니다.

이러한 비동기 프로그래밍을 더욱 간결하고 효율적으로 다루기 위해 도입된 개념이 바로 Promise입니다.

Promise란 무엇인가?

Promise는 미래의 어떤 시점에 완료될 일을 나타내는 객체입니다. 여기서 완료될 일이란 주로 비동기 작업을 말하며, 이 작업은 성공할 수도 실패할 수도 있습니다.

Promise는 이런 비동기 작업의 결과를 처리하는 방법을 제공합니다.

Promise의 상태

Promise는 다음과 같은 세 가지 상태를 가질 수 있습니다:

Pending (대기) – 초기 상태로, 아직 완료되지 않은 상태.

Fulfilled (이행) – 작업이 성공적으로 완료된 상태.

Rejected (거부) – 작업이 실패한 상태

Promise의 구조

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  let success = true; // 예시

  if (success) {
    resolve('작업이 성공적으로 완료되었습니다!');
  } else {
    reject('작업이 실패했습니다.');
  }
});

Promise 사용 방법

기본 사용법

Promise는 then 과 catch 메서드를 사용하여 결과를 처리합니다.

myPromise
  .then((message) => {
    console.log(message); // 작업이 성공적으로 완료되었습니다!
  })
  .catch((error) => {
    console.error(error); // 작업이 실패했습니다.
  });

체이닝 (Chaining)

then 메서드는 또 다른 Promise를 반환하기 때문에, 여러 개의 then을 체인(chain)으로 연결할 수 있습니다.

myPromise
  .then((message) => {
    console.log(message);
    return '다음 작업으로 넘어갑니다.';
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error(error);
  });

병렬 실행

여러 개의 Promise를 병렬로 실행하고, 모든 Promise가 완료될 때까지 기다릴 수 있습니다. 이를 위해 Promise.all 을 사용합니다.

const promise1 = Promise.resolve('첫 번째 작업 완료');
const promise2 = Promise.resolve('두 번째 작업 완료');
const promise3 = Promise.resolve('세 번째 작업 완료');

Promise.all([promise1, promise2, promise3])
  .then((messages) => {
    console.log(messages); // ['첫 번째 작업 완료', '두 번째 작업 완료', '세 번째 작업 완료']
  })
  .catch((error) => {
    console.error(error);
  });

빠른 실행

여러 개의 Promise 중 가장 빨리 완료된 하나의 결과를 얻고자 할 때는 Promise.race 를 사용합니다.

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, '첫 번째 완료'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, '두 번째 완료'));

Promise.race([promise1, promise2])
  .then((message) => {
    console.log(message); // '두 번째 완료'
  })
  .catch((error) => {
    console.error(error);
  });

async/await와의 결합

ES8(ECMAScript 2017)에서 도입된 async 와 await 키워드는 Promise를 더욱 간결하고 읽기 쉽게 다룰 수 있게 해줍니다.

async function myAsyncFunction() {
  try {
    const message = await myPromise;
    console.log(message);
  } catch (error) {
    console.error(error);
  }
}

myAsyncFunction();

결론

Promise는 JavaScript에서 비동기 작업을 다루는 강력한 도구입니다.

콜백 지옥(callback hell)을 피하고, 코드를 더 명확하고 관리하기 쉽게 만들어줍니다. async / await 와 결합하면 더욱 직관적인 비동기 프로그래밍을 할 수 있습니다.

Promise 패턴을 잘 이해하고 활용하면, JavaScript 비동기 프로그래밍의 새로운 지평을 열 수 있을 것입니다.

zzou