[React ] study(1) Promise

dev kyu·2025년 1월 13일

React

목록 보기
5/11

Promise란,

비동기 작업(조금 시간이 걸리는 작업)의 결과를 미래에 제공하겠다고 약속하는 것이야.
완료 또는 실패를 처리하기 위해 사용되는 개념이기도 해.

📍핵심(쉬운) 설명

  • 음식 주문 (Promise): 배달 앱에서 피자 주문.
    이때, 앱은 "피자가 곧 도착할 거야"라고 약속해. (Promise 생성.)

  • 피자가 오기 전 (Pending): 피자가 만들어지는 중이거나, 배달 중인 상태.
    이 상태를 Pending 상태.(결과가 아직 준비되지 않음!)

  • 피자가 도착 (Fulfilled): 배달원이 피자를 가져오면 약속이행.
    이 상태를 Fulfilled 상태. (약속이 성공적으로 완료!)

  • 문제가 생길 경우 (Rejected): 가게가 문을 닫았거나, 배달이 취소되면 약속을 지킬 수 없음. 이 상태를 Rejected 상태.(약속 실패!)


🔍 Promise 상태

  • Pending: 결과를 기다리는 중.(초기 상태) resolvereject로 인해 다른 상태로 변경되기 전까지의 상태.
  • Fulfilled: 작업이 성공적으로 완료됨. resolve로 인해 pending 상태에서 fulfilled 상태로 변경.
  • Rejected: 작업이 실패함. reject로 인해 pending 상태에서 rejected 상태로 변경.

🙌 Promise 객체는 then, catch, finally 메서드를 통해 이행되거나 거부된 이후의 동작을 정의할 수 있다!


🔍 자주 사용되는 패턴(예시)

1️⃣ Promise 생성(음식 주문하기)

const orderPizza = new Promise((resolve, reject) => {
  const isStoreOpen = true;
  if (isStoreOpen) {
    resolve("피자가 도착했습니다! 🍕");
  } else {
    reject("가게가 문을 닫았습니다. 😢");
  }
});

2️⃣ Promise 처리(배달 결과 확인하기)

orderPizza
  .then((message) => {
    console.log(message); // "피자가 도착했습니다! 🍕"
  })
  .catch((error) => {
    console.error(error); // "가게가 문을 닫았습니다. 😢"
  });

🙌 Promise를 왜 사용할까?

  • 기다림 관리: 네트워크 요청(예: 데이터 가져오기), 파일 읽기 등 시간이 걸리는 작업의 결과를 효율적으로 처리.

  • 코드 정리: 비동기 작업을 순서대로 처리할 때 코드가 더 읽기 쉽게 정리됩니다.


🚀 진짜 쉬운 설명

Promise는 결과가 나중에 제공되는 작업을 처리하기 위한 도구로, 성공(Fulfilled) 또는 실패(Rejected) 상태에 따라 원하는 동작을 정의할 수 있다.


✏️ 더 알아가기

  • Promise.all이란?
    여러 개의 Promise를 동시에 실행하고, 모두 완료될 때까지 기다린 후 결과를 반환하는 메서드.
    즉, "여러 작업을 한꺼번에 처리하고, 결과를 한 번에 받아오겠다"는 의미.

  • Promise.all을 쉽게 비유하기
    Promise.all은 여러 음식을 한꺼번에 배달 주문하는 것과 비슷해.

    • 여러 음식을 주문 (Promise 생성): 피자, 치킨, 그리고 버거를 각각 주문.(여러 개의 Promise를 생성.)

    • 모든 음식이 도착해야 완료 (모든 Promise가 Fulfilled): 모든 배달원이 음식을 가져와야 완료.(Promise.all은 모든 Promise가 성공해야 결과를 반환.)

    • 한 음식이라도 실패하면 전체 실패 (Rejected): 예를 들어, 피자 가게가 문을 닫았으면 전체 주문이 실패. (Promise.all은 하나라도 Rejected 상태면 전체가 실패로 간주.)

  • Promise.all의 특징

    • 모든 Promise가 Fulfilled: 모든 Promise가 성공적으로 완료되면, 결과를 배열로 반환.
    • 하나라도 Rejected: Promise 중 하나라도 실패하면 즉시 에러를 반환하고 멈춤.
    • 병렬 실행: Promise를 동시에 실행하므로 작업 시간을 줄일 수 있음.
  • Promise.all 예제

1️⃣ 기본 사용법

const pizza = new Promise((resolve) => setTimeout(() => resolve("피자 도착! 🍕"), 3000));
const chicken = new Promise((resolve) => setTimeout(() => resolve("치킨 도착! 🍗"), 2000));
const burger = new Promise((resolve) => setTimeout(() => resolve("버거 도착! 🍔"), 1000));
Promise.all([pizza, chicken, burger])
  .then((results) => {
    console.log("모든 음식 도착:", results);
    // 결과: ["피자 도착! 🍕", "치킨 도착! 🍗", "버거 도착! 🍔"]
  })
  .catch((error) => {
    console.error("배달 실패:", error);
  });

2️⃣ 하나의 Promise라도 실패하는 경우

const pizza = new Promise((resolve) => setTimeout(() => resolve("피자 도착! 🍕"), 3000));
const chicken = new Promise((resolve, reject) => setTimeout(() => reject("치킨 배달 실패!"), 2000));
const burger = new Promise((resolve) => setTimeout(() => resolve("버거 도착! 🍔"), 1000));
Promise.all([pizza, chicken, burger])
  .then((results) => {
    console.log("모든 음식 도착:", results);
  })
  .catch((error) => {
    console.error("배달 실패:", error);
    // 결과: "배달 실패: 치킨 배달 실패!"
  });
  • Promise.all을 사용하는 이유

    • 동시에 작업 처리: 여러 작업을 병렬로 처리해 시간을 절약할 수 있어요.
    • 결과를 한꺼번에 처리: 모든 작업이 완료된 후, 결과를 한 번에 가져올 수 있습니다.
    • 실패 처리 용이: 작업 중 하나라도 실패하면 에러를 쉽게 감지하고 처리할 수 있습니다.
  • 한줄 요약
    Promise.all은 여러 Promise를 병렬로 실행하고, 모든 작업이 완료되면 결과를 배열로 반환하는 메서드로, 동시에 여러 작업을 효율적으로 처리할 때 사용.

profile
dev kyu

0개의 댓글