Promise와 Async의 차이점 이해하기! 🌟

JavaScript 비동기 프로그래밍에서 Promise와 Async/Await는 흔히 사용되는 방식입니다. 두 방식 모두 비동기 처리를 지원하지만, 각각의 동작 방식과 활용법에는 차이가 있습니다. 이번 글에서는 Promise와 Async/Await의 차이점과 각각의 특징을 예제와 함께 살펴보겠습니다! 😄

---

1. Promise란? 📜

Promise는 비동기 작업의 상태와 결과를 나타내는 객체입니다. 세 가지 상태를 가집니다:

• Pending(대기 중): 초기 상태, 작업이 완료되지 않음.
• Fulfilled(성공): 작업이 완료되고 결과를 반환함.
• Rejected(실패): 작업이 실패하고 에러를 반환함.

Promise 예제

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // 성공 여부를 결정
      if (success) {
        resolve("데이터 로드 성공! ✅");
      } else {
        reject("데이터 로드 실패! ❌");
      }
    }, 1000);
  });
};

fetchData()
  .then((result) => console.log(result)) // 성공 처리
  .catch((error) => console.error(error)); // 실패 처리

Promise는 then과 catch를 사용하여 성공과 실패를 처리합니다. 콜백 지옥을 완화해주는 장점이 있지만, 복잡한 로직에서는 가독성이 떨어질 수 있습니다.

---

2. Async/Await란? ⏳

Async/Await는 ES2017(ES8)에서 도입된 문법으로, 비동기 코드를 마치 동기 코드처럼 작성할 수 있도록 도와줍니다. async 키워드는 함수 앞에 붙여서 Promise를 반환하도록 하고, await 키워드는 Promise가 처리될 때까지 기다립니다.

Async/Await 예제

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("데이터 로드 성공! ✅");
      } else {
        reject("데이터 로드 실패! ❌");
      }
    }, 1000);
  });
};

const getData = async () => {
  try {
    const result = await fetchData(); // Promise가 처리될 때까지 대기
    console.log(result);
  } catch (error) {
    console.error(error);
  }
};

getData();

Async/Await는 Promise 기반 코드를 보다 간결하고 직관적으로 작성할 수 있게 해줍니다.

---

3. Promise vs Async/Await 비교 🔄

특징	Promise	Async/Await
작성 방식	then과 catch 체인을 사용	동기 코드처럼 try/catch와 await 사용
가독성	복잡한 체인에서는 가독성이 떨어질 수 있음	코드가 간결하고 읽기 쉬움
에러 처리	catch 블록에서 처리	try/catch 블록에서 처리
유연성	중첩된 비동기 로직 처리에 유리	간단한 비동기 로직에 적합
도입 시기	ES6 (2015년)	ES8 (2017년)

주요 차이점

• 가독성: Async/Await는 비동기 로직을 동기 코드처럼 작성할 수 있어 직관적입니다.
• 구조: Promise는 체인을 통해 로직을 연결하지만, Async/Await는 await를 사용하여 순차적으로 처리합니다.
• 복잡도: 중첩된 비동기 작업은 Promise가 더 유리할 수 있으며, 단순한 작업은 Async/Await이 더 적합합니다.

---

4. 실전에서의 활용 🌐

4.1 Promise의 활용 사례

Promise는 동시에 여러 비동기 작업을 처리할 때 유용합니다.

const fetchUser = () => Promise.resolve("유저 데이터 로드 ✅");
const fetchPosts = () => Promise.resolve("포스트 데이터 로드 ✅");

Promise.all([fetchUser(), fetchPosts()])
  .then((results) => console.log(results)) // 모든 작업이 완료되면 실행
  .catch((error) => console.error(error));

4.2 Async/Await의 활용 사례

Async/Await는 복잡한 비동기 로직을 순차적으로 처리할 때 적합합니다.

const fetchAllData = async () => {
  try {
    const user = await fetchUser();
    console.log(user);

    const posts = await fetchPosts();
    console.log(posts);
  } catch (error) {
    console.error("데이터 로드 중 에러 발생: ", error);
  }
};

fetchAllData();

---

5. 요약 ✍️

• Promise는 then과 catch를 통해 비동기 작업을 처리하며, 동시에 여러 작업을 병렬 처리하기에 유용합니다.
• Async/Await는 비동기 작업을 동기 코드처럼 작성할 수 있게 하여 가독성을 높입니다.
• 상황에 따라 Promise와 Async/Await를 적절히 선택하여 사용하세요.