JavaScript Promise 개념과 사용법

1. Promise란?

Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체입니다. 보통 네트워크 요청, 파일 읽기, 데이터베이스 조회 같은 작업은 시간이 걸리기 때문에, 이를 동기적으로 처리하면 성능 저하가 발생할 수 있습니다. Promise를 사용하면 이러한 비동기 작업을 보다 효율적으로 관리할 수 있습니다.

2. Promise의 상태

Promise는 3가지 상태를 가집니다.

• Pending(대기): 비동기 작업이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 작업이 성공적으로 완료된 상태 (resolve 호출)
• Rejected(실패): 비동기 작업이 실패한 상태 (reject 호출)

3. 기본적인 Promise 사용법

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("작업 완료!");
    // reject("에러 발생!");
  }, 2000);
});

myPromise
  .then((result) => {
    console.log(result); // "작업 완료!" 출력
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("작업 종료");
  });

• resolve(value): 작업이 성공하면 then()의 콜백 함수가 실행됨
• reject(error): 작업이 실패하면 catch()의 콜백 함수가 실행됨
• finally(): 성공/실패와 관계없이 실행됨

4. 여러 개의 Promise 처리

(1) Promise.all

여러 개의 비동기 작업이 모두 완료될 때까지 기다림.

const p1 = new Promise((resolve) => setTimeout(() => resolve("첫 번째 완료"), 1000));
const p2 = new Promise((resolve) => setTimeout(() => resolve("두 번째 완료"), 2000));

Promise.all([p1, p2]).then((results) => {
  console.log(results); // ["첫 번째 완료", "두 번째 완료"]
});

• 하나라도 실패하면 catch() 실행됨.

(2) Promise.race

가장 먼저 완료된 Promise의 결과를 반환.

Promise.race([p1, p2]).then((result) => {
  console.log(result); // "첫 번째 완료"
});

(3) Promise.allSettled

모든 Promise의 완료 여부를 반환하며, 성공/실패 상관없이 개별 결과를 알려줌.

Promise.allSettled([p1, p2]).then((results) => {
  console.log(results);
});

• 결과는 { status: "fulfilled", value: "..." } 또는 { status: "rejected", reason: "..." } 형태.

(4) Promise.any

하나라도 성공하면 해당 결과를 반환, 모든 작업이 실패하면 AggregateError 발생.

const p3 = new Promise((_, reject) => setTimeout(() => reject("실패1"), 1000));
const p4 = new Promise((resolve) => setTimeout(() => resolve("성공"), 2000));

Promise.any([p3, p4]).then(console.log).catch(console.error); // "성공"

5. async/await와 함께 사용

Promise는 async/await 문법을 사용하면 더 가독성이 좋은 코드로 작성할 수 있음.

async function fetchData() {
  try {
    let result = await myPromise;
    console.log(result);
  } catch (error) {
    console.error(error);
  } finally {
    console.log("작업 종료");
  }
}

fetchData();

• await 키워드는 Promise가 처리될 때까지 기다림.
• try...catch 문을 사용하여 에러 처리.

6. 정리

• Promise는 비동기 작업을 다룰 때 사용하며, then/catch/finally를 통해 처리 가능.
• Promise.all(), Promise.race() 등 여러 개의 Promise를 효율적으로 관리하는 메서드가 제공됨.
• async/await을 사용하면 Promise 기반 코드를 더 직관적으로 작성할 수 있음.