자바스크립트 Promise 이해하기

Promise란?

Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 자바스크립트의 세계에서는 대부분의 작업들이 비동기로 이루어지기 때문에 프론트엔드 개발을 하든 백엔드 개발을 하든 자바스크립트를 활용하여 웹 개발을 한다면 비동기 프로그래밍에 대한 이해가 꼭 필요합니다.

자바스크립트에서 비동기 처리란?

자바스크립트에서 비동기 처리란 “특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성”을 의미합니다.

Promise를 사용하는 이유

웹 개발을 하게되면 서버에서 받아온 데이터를 화면에 표시하는 경우가 많습니다. 데이터를 서버에 요청하고, 데이터가 로드되고, 로드된 데이터가 화면에 표시되는 식으로 진행되곤 하는데요. 만약 로드가 완료되지 않은 상태에서 데이터를 다 받아온 것 마냥 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게됩니다. 이런 문제점을 해결하기 위한 방법 중 하나가 바로 Promise입니다. 즉 Promise를 사용하게 되면 비동기 작업을 순차적으로 처리하거나 병렬로 진행하는 등 작업을 좀 더 수월하게 처리할 수 있게 되는 것입니다.

Promise의 특징

Promise의 특징으로는 3가지 상태를 가지고 있다는 점을 말할 수 있는데요. Promise를 생성하고 종료될 때 까지 아래의 3가지 상태를 갖게 됩니다.

• Pending(대기) : 비동기 로직 처리가 완료되지 않은 상태(결과를 기다리는 중)

new Promise(function (resolve, reject) {
  // ...
});

• Fulfilled(이행) : 비동기 로직 처리가 완료된 상태(정상적으로 수행, 결과값 가짐)

new Promise(function (resolve, reject) {
  resolve();
}); //이렇게 resolve가 실행되면 이행 상태가 된다.

function getData() {
  return new Promise(function (resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// 이행 상태가 된 후에는 then을 이용하여 결과값을 받을 수 있다.
// resolve()의 결과 값 data를 resolveData로 받음
getData().then(function (resolvedData) {
  console.log(resolvedData); // 100;
});

• Rejected(실패) : 비동기 로직 처리의 실패 또는 오류 상태(수행이 비정상적으로 끝남)

Promise 생성하기

Promise를 생성하는 방법은 아래와 같이 3가지 방법이 있습니다.

//1
const p1 = new Promise((resolve, reject) => {});

//2
const p2 = Promise.reject("error"); //거부 상태의 Promise 생성

//3
const p3 = Promise.resolve(param);

첫 번째 방법으로 Promise를 만들었을 때는 resolve와 reject라는 콜백 함수를 매개변수로 갖고 비동기로 어떤 작업을 수행하고 난 뒤에 성공하면 resolve를 호출하고 실패하면 reject를 호출하면 됩니다.

Today I Learned

오늘은 자바의 비동기 처리에 사용되는 Promise에 대한 이해를 해보았습니다. async와 await도 조만간 공부해서 정리해봐야겠다는 생각이 드네요 :)

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)