JavaScript 비동기 함수(Promise) 완벽 가이드

JavaScript의 비동기 처리에서 중요한 역할을 하는 Promise에 대해 상세히 알아보겠습니다. Promise는 비동기 작업의 상태를 관리하고, 그 결과를 더 쉽게 처리할 수 있도록 돕는 객체입니다. 이 글에서는 Promise의 기본 개념, 상태, 사용법, 예제 등을 제공하여 Promise에 대한 이해를 돕고자 합니다.

Promise의 기본 개념

Promise는 비동기 작업이 끝난 후 성공 혹은 실패의 결과를 나타내는 객체로, 주로 서버와의 통신, 파일 읽기, 데이터베이스 쿼리 등 다양한 상황에서 사용됩니다. Promise는 주로 세 가지 상태를 가집니다:

• Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태입니다.
• Fulfilled (이행됨): 비동기 작업이 성공적으로 종료된 상태입니다.
• Rejected (거부됨): 비동기 작업이 실패하여 결과값이 없거나 오류가 발생한 상태입니다.

Promise 생성하기

Promise 객체는 new Promise 구문을 통해 생성됩니다. 생성자 함수의 인자로는 두 개의 콜백 함수, 즉 resolve와 reject가 전달됩니다. 다음은 Promise를 생성하는 기본적인 예제입니다:

const myPromise = new Promise((resolve, reject) => {
 // 비동기 작업 수행
 if (/* 작업 성공 */) {
  resolve('성공적으로 완료되었습니다.');
 } else {
  reject('실패하였습니다.');
 }
});

resolve와 reject의 역할

Promise 내부에서 비동기 작업이 성공하면 resolve를 호출하여 결과를 반환하고, 실패할 경우 reject를 호출하여 에러 메시지를 반환합니다. 예를 들어, 다음과 같은 코드가 있습니다:

const myPromise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const success = true; // 이 부분을 조절하여 성공 여부를 평가
  if (success) {
   resolve("비동기 작업 성공");
  } else {
   reject("오류가 발생했습니다.");
  }
 }, 1000);
});

Promise 사용하기

Promise를 사용하여 비동기 작업의 결과를 처리하기 위해서는 then과 catch 메서드를 활용합니다. then은 Promise가 이행된 경우에 호출되는 메서드이고, catch는 거부된 경우를 처리하는 메서드입니다. 다음은 이 두 메서드를 사용하는 예시입니다:

myPromise
 .then((result) => {
  console.log("성공:", result);
 })
 .catch((error) => {
  console.error("에러:", error);
 });

여러 개의 Promise 처리하기

여러 개의 Promise를 동시에 처리하거나 순차적으로 실행할 필요가 있을 때는 Promise.all과 Promise.race를 사용할 수 있습니다.

• Promise.all: 모든 Promise가 이행될 때까지 기다리고, 그 결과를 배열로 반환합니다.
• Promise.race: 가장 먼저 이행된 Promise의 결과를 반환합니다.

실제 예제

Promise를 사용하는 구체적인 예제를 통해 비동기 작업을 어떻게 처리하는지 알아보겠습니다. 아래는 외부 API에서 데이터를 fetch하는 함수입니다:

function fetchData(url) {
 return new Promise((resolve, reject) => {
  fetch(url)
   .then((response) => {
    if (!response.ok) {
     throw new Error("네트워크 응답에 문제가 발생했습니다.");
    }
    return response.json();
   })
   .then((data) => resolve(data))
   .catch((error) => reject(error));
 });
}
fetchData("https://api.example.com/data")
 .then((data) => {
  console.log("데이터:", data);
 })
 .catch((error) => {
  console.error("오류 발생:", error);
 });

async/await와 Promise

Promise는 async와 await와 함께 사용될 때 더욱 간편하게 비동기 작업을 수행할 수 있습니다. async 키워드는 비동기 함수를 정의하는 데 사용되며, 이 함수는 항상 Promise를 반환합니다. await는 Promise가 이행될 때까지 기다리는 역할을 합니다. 다음 예제를 살펴보세요:

async function main() {
 try {
  const userData = await fetchUserData(123);
  console.log("사용자 데이터:", userData);
 } catch (error) {
  console.error("오류 발생:", error.message);
 }
}
main();

결론

Promise는 JavaScript에서 비동기 작업을 효과적으로 처리하고 관리하는 강력한 도구입니다. 본 포스트에서는 Promise의 기본 개념, 사용법, 상태 관리, 예제 등을 소개하였습니다. Promise를 활용함으로써 더욱 가독성이 높고 효율적인 코드를 작성할 수 있습니다. 또한, async/await와 결합하여 더욱 직관적인 비동기 코드를 작성하는 방법에 대해서도 설명하였습니다. 이러한 내용을 바탕으로 JavaScript의 비동기 처리에 대한 이해를 높이시길 바랍니다.

자주 찾는 질문 Q&A