JavaScript Promises의 기본 개념과 활용법

JavaScript Promises는 비동기 작업을 더 쉽게 다룰 수 있게 해주는 강력한 도구입니다. 웹 개발을 하다 보면, 데이터를 서버에서 가져오거나, 이미지를 로드하는 등 시간이 걸리는 작업들을 많이 마주치게 됩니다. 이때, Promises를 사용하면 이러한 비동기 작업들을 효율적으로 관리할 수 있습니다.

Promise란 무엇인가요?

간단히 말해서, Promise는 어떤 작업이 완료될 것이라는 '약속'입니다. 이 작업은 성공할 수도 있고, 실패할 수도 있습니다. Promise는 세 가지 상태 중 하나를 가집니다:

• 대기중(Pending): 작업이 아직 완료되지 않은 상태
• 이행됨(Fulfilled): 작업이 성공적으로 완료된 상태
• 거부됨(Rejected): 작업이 실패한 상태

Promise 만들기

Promise를 만드는 것은 간단합니다. new Promise() 생성자를 사용하여 Promise 객체를 생성할 수 있습니다. 이 생성자는 실행 함수(executor function)를 인자로 받으며, 이 함수는 resolve와 reject 두 가지 파라미터를 가집니다.

let myPromise = new Promise((resolve, reject) => {
  // 비동기 작업을 여기에 작성
  let condition = true; // 예시 조건
  if (condition) {
    resolve("성공!"); // 작업이 성공하면 resolve 호출
  } else {
    reject("실패..."); // 작업이 실패하면 reject 호출
  }
});

Promise 사용하기

Promise가 만들어지면, .then(), .catch(), .finally() 메소드를 사용하여 결과를 처리할 수 있습니다.

• .then()은 Promise가 성공적으로 이행됐을 때 실행됩니다.
• .catch()는 Promise가 거부됐을 때 실행됩니다.
• .finally()는 Promise의 결과와 상관없이 실행됩니다.

myPromise
  .then((result) => {
    console.log(result); // "성공!" 출력
  })
  .catch((error) => {
    console.error(error); // "실패..." 출력
  })
  .finally(() => {
    console.log("Promise가 완료되었습니다.");
  });

활용 예시

웹 개발에서 데이터를 서버로부터 가져오는 작업은 매우 흔합니다. fetch API와 함께 Promise를 사용하여 이러한 작업을 쉽게 처리할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json()) // 응답을 JSON으로 변환
  .then(data => console.log(data)) // 데이터 출력
  .catch(error => console.error("데이터를 가져오는 데 실패했습니다.", error));

이 예시에서 fetch는 웹 서버로부터 데이터를 가져오기 위한 Promise를 반환합니다. 데이터를 성공적으로 가져오면, 첫 번째 .then()에서 응답을 JSON 형태로 변환하고, 두 번째 .then()에서 이 데이터를 출력합니다. 만약 오류가 발생하면, .catch()가 실행되어 오류 메시지를 출력합니다.

결론

JavaScript Promises는 비동기 작업을 다루는 강력하면서도 유연한 방법을 제공합니다. 이를 통해 코드의 가독성을 높이고, 비동기 로직을 더 쉽게 관리할 수 있습니다. Promises를 잘 활용하면, 복잡한 비동기 작업도 효과적으로 처리할 수 있습니다.