Javascript의 Promise

kimsnmyng·2025년 1월 27일

Front-End CS

목록 보기
35/79

자바스크립트의 Promise

Promise란 무엇인가?

Promise는 자바스크립트에서 비동기 작업을 관리하고, 해당 작업의 성공 또는 실패 결과를 나중에 사용할 수 있도록 하는 객체이다. 기본적으로 비동기 작업의 완료 여부를 약속해주는 개념이라고 할 수 있다.

Promise의 필요성

자바스크립트는 전통적으로 비동기 처리를 위해 콜백 함수를 사용했다. 하지만 콜백 함수는 다음과 같은 문제점을 가지고 있었다.

  • 콜백 지옥(Callback Hell)
  • 가독성 저하
  • 에러 처리의 어려움

Promise는 이러한 문제들을 해결하기 위해 도입되었다.

Promise의 상태

Promise는 세 가지 상태를 가진다:

  1. Pending: 비동기 작업이 아직 완료되지 않은 초기 상태
  2. Fulfilled: 비동기 작업이 성공적으로 완료되어 값을 반환한 상태
  3. Rejected: 비동기 작업이 실패하여 오류를 반환한 상태

Promise 생성 및 사용

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (/* 작업 성공 */) {
    resolve(결과); // 성공 시 resolve 호출
  } else {
    reject(에러); // 실패 시 reject 호출
  }
});

promise
  .then((result) => {
    // 성공 시 처리
  })
  .catch((error) => {
    // 실패 시 처리
  });

Promise의 장점

  • 비동기 작업의 가독성 향상
  • 체이닝을 통한 순차적 비동기 처리
  • 병렬 처리 지원 (Promise.all(), Promise.race() 등)

Promise의 한계

1. 복잡한 에러 처리

  • 중첩된 Promise에서 에러 추적이 어려울 수 있음
  • 특정 단계의 세밀한 에러 처리가 복잡함

2. 여전한 콜백 지옥 가능성

  • 여러 then() 메서드 사용 시 여전히 가독성 저하 가능성
  • 복잡한 비동기 흐름에서 코드 구조가 복잡해질 수 있음

대안: Async/Await

이러한 Promise의 한계를 극복하기 위해 async/await 문법이 도입되었다:

async function fetchData() {
  try {
    const result = await someAsyncOperation();
    // 동기적으로 보이는 비동기 코드
  } catch (error) {
    // 에러 처리
  }
}

Async/Await는 Promise 기반의 더 간결하고 읽기 쉬운 비동기 코드 작성을 가능하게 한다.

profile
안녕하세요 김선명입니다.

0개의 댓글