[JS 기초] Promise

Promise 🤝

JavaScript에서 비동기 작업을 처리할 때
가장 중요한 개념이 바로 Promise입니다.

Promise는 쉽게 말하면

"나중에 결과를 줄게"

라는 약속 객체입니다.

주요 포인트 Top3

01. Promise란 무엇인가

Promise는 비동기 작업의 결과를 담는 객체입니다.

즉

지금 결과 없음
→ 나중에 결과 생김
→ 그 결과를 전달

이 흐름을 처리합니다.

02. Promise 비유

Promise는 배달 주문과 같습니다.

음식 주문
→ 음식 만드는 중
→ 완료되면 배달

여기서

주문 상태 → pending
배달 완료 → fulfilled
배달 실패 → rejected

이렇게 3가지 상태가 있습니다.

03. Promise 상태

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

pending → 대기 상태
fulfilled → 성공
rejected → 실패

한 번 상태가 바뀌면
다시 변경되지 않습니다.

04. Promise 기본 구조

const promise = new Promise((resolve, reject) => {
 
  resolve("성공");
 
});

여기서

resolve → 성공
reject → 실패

를 의미합니다.

05. then / catch 사용

Promise 결과는
then과 catch로 처리합니다.

promise
.then(result => {
  console.log(result);
})
.catch(error => {
  console.log(error);
});

실행 흐름

성공 → then 실행
실패 → catch 실행

06. fetch와 Promise

fetch도 사실은 Promise를 반환합니다.

fetch("API주소")
.then(response => response.json())
.then(data => {
  console.log(data);
});

즉

fetch = Promise 기반

그래서 then을 사용하는 것입니다.

07. Promise → async / await 관계

async / await는
Promise를 더 쉽게 쓰기 위한 문법입니다.

then 방식

fetch("API주소")
.then(res => res.json())
.then(data => console.log(data));

async / await 방식

const loadData = async () => {
 
  const res = await fetch("API주소");
  const data = await res.json();
 
  console.log(data);
 
};

즉

Promise → 원래 방식
async/await → 더 쉽게 쓴 방식

GOYO.’s Tip 💡

Promise는 이렇게 기억하면 됩니다.

Promise = 미래에 결과를 주는 약속

그리고 대부분의 비동기 코드는

Promise 기반
↓
then 사용
↓
async/await로 변환

이 흐름으로 사용됩니다.

마무리 🎯

Promise는 JavaScript에서
비동기 처리의 핵심 개념입니다.

특히

fetch
서버 요청
데이터 처리

같은 작업은 모두
Promise 기반으로 동작합니다.