JavaScript Promise 완벽 가이드: resolve()와 fulfilled 상태 이해하기

프론트엔드 개발자라면 반드시 알아야 할 Promise의 핵심 개념

목차

• Promise란 무엇인가?
• resolve()와 fulfilled의 차이점
• 실제 코드로 이해하기
• Promise의 상태 흐름
• 자주 묻는 질문
• 마무리

---

Promise란 무엇인가?

현대 JavaScript 개발에서 비동기 처리는 필수적인 요소입니다. 네트워크 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업을 처리할 때 코드 실행을 블로킹하지 않고 효율적으로 처리하기 위해 Promise를 사용합니다.

Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과값을 나타내는 객체입니다. 쉽게 말해, "나중에 완료될 작업"을 나타내는 객체라고 생각할 수 있습니다.

// Promise 기본 형태
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 작업 성공 시: resolve(결과값)
  // 작업 실패 시: reject(에러)
});

---

resolve()와 fulfilled의 차이점

Promise를 이해하기 위해서는 resolve()와 fulfilled 상태의 차이점을 명확히 알아야 합니다.

resolve()

resolve()는 함수입니다. Promise 생성자에 전달되는 콜백 함수의 첫 번째 인자로, Promise가 성공적으로 완료되었을 때 호출하는 함수입니다.

마치 식당에서 주문한 음식이 완성되었을 때, 웨이터가 "주문하신 음식 나왔습니다!"라고 알려주는 것과 같습니다. 이때 음식(결과값)을 함께 전달합니다.

fulfilled

fulfilled는 상태입니다. Promise가 성공적으로 완료되어 결과값을 가지고 있는 상태를 의미합니다.

식당 비유를 계속하자면, 손님이 주문한 음식을 받은 상태를 fulfilled 상태라고 할 수 있습니다.

핵심 차이점

• resolve()는 Promise를 fulfilled 상태로 변경시키는 행위(함수)
• fulfilled는 Promise가 성공적으로 완료된 상태

---

실제 코드로 이해하기

다음 예제를 통해 resolve()와 fulfilled 상태의 관계를 더 명확히 이해해 봅시다.

// Promise 생성
const fetchData = new Promise((resolve, reject) => {
  // 비동기 작업 시뮬레이션 (1초 후 데이터 반환)
  setTimeout(() => {
    const data = { id: 1, name: "사용자 데이터" };

    // resolve() 호출 - Promise를 fulfilled 상태로 변경
    resolve(data);

    console.log("데이터 페칭 완료!");
  }, 1000);
});

// Promise 사용
fetchData
  .then(result => {
    // fulfilled 상태가 되면 실행되는 코드
    console.log("받은 데이터:", result);
  })
  .catch(error => {
    // rejected 상태가 되면 실행되는 코드
    console.error("오류 발생:", error);
  });

위 코드에서:

1. fetchData라는 Promise를 생성합니다.
2. 1초 후에 resolve(data)를 호출하여 Promise를 fulfilled 상태로 변경합니다.
3. Promise가 fulfilled 상태가 되면 .then() 내부의 콜백 함수가 실행됩니다.

---

Promise의 상태 흐름

Promise는 생명주기 동안 다음 세 가지 상태 중 하나를 갖습니다:

상태	설명	전환 방법
pending	초기 상태, 비동기 작업 진행 중	-
fulfilled	작업이 성공적으로 완료됨	resolve() 호출
rejected	작업이 실패함	reject() 호출

Promise 상태 흐름을 시각적으로 표현하면 다음과 같습니다:

[pending] ──┬─> [fulfilled] (resolve() 호출)
            └─> [rejected]  (reject() 호출)

중요한 점은 Promise의 상태가 한 번 변경되면(fulfilled 또는 rejected) 더 이상 변경되지 않는다는 것입니다. 이를 "settled"(확정됨) 상태라고 합니다.

---

자주 묻는 질문

Q: resolve()에서 작업이 실패할 수도 있나요?

A: resolve()가 실패하는 상황은 발생하지 않습니다. resolve()는 Promise를 '이행(fulfilled)'으로 만드는 함수이기 때문에, 성공적인 결과를 전달할 때만 사용됩니다.

만약 Promise에서 오류나 실패가 발생한다면, resolve()가 아닌 reject()를 호출해야 합니다:

const failingPromise = new Promise((resolve, reject) => {
  try {
    // 어떤 작업 수행
    throw new Error("작업 실패!");
  } catch (error) {
    // 오류 발생 시 reject() 호출
    reject(error);
  }
});

Q: resolve()와 then()의 관계는 무엇인가요?

A: resolve()는 Promise 내부에서 호출하는 함수로, Promise를 fulfilled 상태로 만들고 결과값을 전달합니다. 반면 then()은 Promise가 fulfilled 상태가 되었을 때 실행할 콜백 함수를 등록하는 메서드입니다.

// resolve()는 Promise 내부에서 호출
const promise = new Promise((resolve, reject) => {
  resolve("성공!");
});

// then()은 Promise 외부에서 호출
promise.then(result => {
  console.log(result); // "성공!" 출력
});

---

마무리

JavaScript에서 Promise의 resolve()와 fulfilled 상태를 이해하는 것은 비동기 프로그래밍의 핵심입니다. 요약하자면:

• resolve()는 Promise를 fulfilled 상태로 변경하는 함수입니다.
• fulfilled는 Promise가 성공적으로 완료된 상태입니다.
• Promise가 한 번 fulfilled 또는 rejected 상태가 되면, 그 상태는 변경되지 않습니다.
• then()은 Promise가 fulfilled 상태가 되었을 때 실행될 콜백을 등록합니다.
• catch()는 Promise가 rejected 상태가 되었을 때 실행될 콜백을 등록합니다.

이러한 개념을 확실히 이해하면 복잡한 비동기 로직을 더 효과적으로 다룰 수 있으며, 프론트엔드 개발에서 자주 발생하는 비동기 처리 문제를 해결하는 데 큰 도움이 될 것입니다.

---

참고 자료

• MDN Web Docs: Promise
• JavaScript.info: Promise
• ECMAScript 명세: Promise 객체