[React🩵] Promise

01.  Promise란?

JavaScript에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
이 객체는 비동기 작업이 수행될 때 그 결과값을 나중에 받기 위한 약속으로 사용된다
주로 서버에서 데이터를 요청하고 받아오는 HTTP 요청 처리에 사용되며 파일 시스템 작업 등 다양한 비동기 작업에서 활용된다

 

 

 

02.  Promise의 세가지 상태

상태	설명	발생 시점
Pending (대기 중)	아직 작업이 완료되지 않은 상태	Promise가 실행되었지만, resolve() 또는 reject()가 호출되지 않음
Fulfilled (이행됨)	작업이 성공적으로 완료된 상태	resolve(value)가 호출되었을 때
Rejected (거부됨)	작업이 실패한 상태	reject(error)가 호출되었을 때

 

 

 

03.  햄버거 주문 예제로 보는 실제 활용 모습

3-1.  전체 코드

const orderBurger = new Promise((resolve, reject) => {
    let isReady = true;  // 햄버거가 준비됐는지 여부

    if (isReady) {
        resolve("🍔 햄버거 나왔습니다!");
    } else {
        reject("❌ 죄송합니다, 재료가 없습니다.");
    }
});

// 주문 결과 확인
orderBurger
    .then((message) => {
        console.log("✅ 성공:", message);  // 햄버거 나오면 실행
    })
    .catch((error) => {
        console.log("❌ 실패:", error);  // 재료 없으면 실행
    });

 

 

3-2.  뜯어보기

1️⃣  Promise 객체 생성 - Pending 상태

const orderBurger = new Promise((resolve, reject) => {

});

• new Promise()를 사용하여 새로운 Promise 객체를 생성
• Promise는 두개의 콜백함수(resolve, reject)를 파라미터로 받는다
  - resolve(value): 성공 시 실행되는 함수(작업 완료)
  - reject(error): 실패 시 실행되는 함수(작업 실패)

 

 

2️⃣  Promise의 성공/실패 여부 결정 - Fulfilled 또는 Rejected로 상태 변경

const orderBurger = new Promise((resolve, reject) => {
    let isReady = true;  // 햄버거가 준비됐는지 여부

    if (isReady) {
        resolve("🍔 햄버거 나왔습니다!");
    } else {
        reject("❌ 죄송합니다, 재료가 없습니다.");
    }
});

• 햄버거가 준비되었다면 resolve 실행
• 재료가 없다면 reject 실행

 

 

3️⃣  .then()과 .catch를 사용해 결과 처리

orderBurger
    .then((message) => {
        console.log("✅ 성공:", message);  // 햄버거 나오면 실행
    })
    .catch((error) => {
        console.log("❌ 실패:", error);  // 재료 없으면 실행
    });

• .then()은 성공했을 때 실행되는 코드
• .catch는 실패했을 때 실행되는 코드
• message, error는 그냥 전달인자