[JavaScript]프로미스(Promise)

HICHULOG·2024년 4월 4일
0

자바스크립트

목록 보기
5/6
post-thumbnail

Promise: 비동기 작업을 위한 가이드

비동기 프로그래밍은 현대 웹 애플리케이션 개발에서 필수적인 부분입니다. JavaScript에서 Promise는 비동기 연산의 완료 또는 실패를 나타내는 객체로, 콜백 지옥(callback hell)을 해결하고 코드의 가독성을 높여줍니다. 이 글에서는 JavaScript의 Promise에 대해 상세히 알아보고, 그 사용법과 특징에 대해 살펴보겠습니다.

🔎 Promise란?

JavaScript의 Promise 객체는 비동기 작업의 최종 완료나 실패를 나타내며, 그 결과 값 혹은 실패 이유를 대리합니다. 이 객체를 통해 비동기 메서드들이 동기 메서드처럼 값을 반환할 수 있게 되었습니다.

✅ 상태

Promise는 세 가지 상태를 가집니다:

  • Pending(대기): 아직 결과가 없는 초기 상태입니다.
  • Fulfilled(이행됨): 연산이 성공적으로 완료되었습니다.
  • Rejected(거부됨): 연산이 실패했습니다.

🧑🏻‍🏫 기본 사용법

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done"), 1000);
});

promise.then(
  result => console.log(result), // 1초 후 "done"을 출력
  error => console.log(error) // 실행되지 않음
);

위 예시에서 Promise 객체는 1초 후에 "done" 값을 가지고 이행됩니다.

⛔️ 체이닝과 오류 처리

Promise의 가장 큰 장점 중 하나는 체이닝입니다. 이를 통해 비동기 작업을 순차적으로 실행할 수 있으며, 중간에 발생한 오류를 적절히 처리할 수 있습니다.

doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .catch(failureCallback); // 오류 처리

⏰ 정적 메서드와 Async/Await

Promise는 all, allSettled, race, resolve, reject와 같은 다양한 정적 메서드를 제공합니다. 이 메서드들은 복잡한 비동기 패턴을 구현할 때 유용합니다.

ES2017에서 도입된 async/await 구문을 사용하면, 프로미스를 더 쉽게 작성하고 읽을 수 있습니다.

async function asyncCall() {
  var result = await resolveAfter2Seconds();
  console.log(result); // 비동기 호출 결과
}

📌 결론

Promise는 JavaScript에서 비동기 작업을 보다 효율적이고, 가독성 있게 관리할 수 있게 해주는 강력한 도구입니다. 비동기 로직을 다룰 때의 복잡성을 줄이고, 코드의 실행 흐름을 명확하게 만들어 줍니다. 현대 웹 개발에서 Promise를 이해하고 사용하는 것은 필수적입니다.

🚀 TIL

프로미스(Promise)

profile
🚀 Front-end Dev

0개의 댓글