[JS ES6] ES6 Promise

Promise는 콜백 함수 패턴의 단점을 보완하기 위한 디자인 패턴입니다. ES6에서 새롭게 도입된 문법이라기보다는, 코드의 흐름을 보다 읽기 쉽고 관리하기 편하게 만들어 주는 디자인 패턴입니다.

---

1️⃣ Promise 기본 구조

Promise는 성공(resolve) 혹은 실패(reject) 여부를 판단하여 그에 맞는 후속 코드를 실행하도록 합니다. 기본 사용법은 아래와 같습니다.

var 프로미스 = new Promise();
프로미스.then(function() {
  // 성공 시 실행할 코드
}).catch(function() {
  // 실패 시 실행할 코드
});

• 설명:
  • new Promise()로 Promise 객체를 생성한 후, then()을 사용해 성공했을 때의 처리, catch()를 사용해 실패했을 때의 처리를 정의합니다.
  • Promise 자체는 코드 실행 흐름을 연결해주는 디자인 패턴이며, 콜백 패턴보다 코드가 길어지지 않고 직관적입니다.

---

2️⃣ Promise의 성공과 실패 판정

Promise 내부에 전달하는 콜백 함수는 두 개의 인자를 받습니다.

첫 번째는 성공을 나타내는 함수, 두 번째는 실패를 나타내는 함수입니다.

성공 판정 예제

var 프로미스 = new Promise(function(성공, 실패) {
  var 어려운연산 = 1 + 1;
  성공(); // 연산 성공 시 성공 함수 호출
});

프로미스.then(function() {
  console.log('연산이 성공했습니다');
}).catch(function() {
  // 실패 시 실행 (여기서는 실행되지 않음)
});

• 설명:
  • 내부 연산 후 성공()을 호출하면, then()에 등록한 코드가 실행됩니다.

실패 판정 예제

var 프로미스 = new Promise(function(성공, 실패) {
  var 어려운연산 = 1 + 1;
  실패(); // 실패 판정: 실패 함수 호출
});

프로미스.then(function() {
  console.log('연산이 성공했습니다');
}).catch(function() {
  console.log('실패했습니다');
});

• 설명:
  • 실패() 함수가 호출되면 catch()에 등록한 코드가 실행됩니다.
  • 결과적으로 콘솔에는 '실패했습니다'가 출력됩니다.

연산 결과 전달하기

연산 결과를 then()에서 활용하고 싶다면, 성공 함수의 인자로 결과를 넘겨주면 됩니다.

var 프로미스 = new Promise(function(성공, 실패) {
  var 어려운연산 = 1 + 1;
  성공(어려운연산); // 결과를 성공 함수에 전달
});

프로미스.then(function(결과) {
  console.log('연산이 성공했습니다: ' + 결과);
}).catch(function() {
  console.log('실패했습니다');
});

• 설명:
  • 성공(어려운연산)을 호출하여 어려운연산의 결과가 then() 내부의 인자 결과로 전달됩니다.

---

3️⃣ Promise를 활용한 비동기 처리 예제

예시 1: 어려운 수학 연산 후 처리

var 프로미스 = new Promise(function(성공, 실패) {
  var 어려운연산 = 1 + 1;
  성공(); // 연산이 완료되면 성공 판정
});

프로미스.then(function() {
  console.log('연산이 성공했습니다');
}).catch(function() {
  // 실패 시 처리 (여기서는 사용되지 않음)
});

• 설명:
  • 수학 연산이 완료된 후 성공 판정을 내려 then()의 코드를 실행합니다.

예시 2: 1초 대기 후 처리

var 프로미스 = new Promise(function(성공, 실패) {
  setTimeout(function() {
    성공(); // 1초 후에 성공 판정
  }, 1000);
});

프로미스.then(function() {
  console.log('1초 대기 성공했습니다');
}).catch(function() {
  console.log('실패했습니다');
});

• 설명:
  • setTimeout을 이용해 1초 후에 성공()을 호출, 그 결과 then()에 등록된 코드가 실행됩니다.
  • 이 예제는 비동기 처리를 깔끔하게 연결할 수 있는 Promise의 장점을 보여줍니다.

---

4️⃣ Promise의 특징

1. 상태(state):

   • pending: Promise 생성 후, 성공/실패 판정 전
   • resolved (또는 fulfilled): 성공 판정 후
   • rejected: 실패 판정 후

   한번 상태가 결정되면 변경할 수 없습니다.

2. 코드 가독성 향상:

   • Promise를 사용하면 복잡한 콜백 패턴 대신 then()과 catch()를 통해 순차적이고 직관적인 코드 흐름을 구현할 수 있습니다.
   • 특히 다중 비동기 작업이나 에러 핸들링 시 유용합니다.

3. 비동기 처리와의 관계:

   • Promise 자체는 동기적 코드 실행 순서를 제어하는 디자인 패턴입니다.
   • Promise 내부에 시간이 많이 걸리는 연산(예: 10초 걸리는 연산)을 넣으면, 그 동안 브라우저는 동기적으로 해당 작업을 처리하므로 다른 작업은 기다리게 됩니다.
   • 중요: Promise는 비동기 실행을 "동기로 바꿔주는" 기능이 아니라, 비동기 처리를 더 읽기 좋게 만드는 패턴입니다.

---

📌 정리

• Promise의 핵심:
  • 성공하면 then(), 실패하면 catch()를 실행하여 이후 코드를 연결합니다.
  • Promise 내부에서 성공과 실패를 판단하는 함수(성공, 실패)를 통해 조건에 따라 다른 처리를 수행할 수 있습니다.
• 실제 사용 예:
  • 어려운 수학 연산, Ajax 요청, 버튼 클릭 등의 다양한 상황에서 성공/실패 판정을 내려 후속 처리를 할 수 있습니다.
• Promise의 장점:
  1. 코드의 흐름이 길어지지 않고 깔끔하게 정리됩니다.
  2. 에러 발생 시 catch()를 통해 별도의 에러 핸들링이 가능해집니다.