Promise Chaining 이해하기: 기존의 프라미스와 반환된 프라미스

sod0l 2024. 10. 1. 11:06

Promise(프라미스)는 자바스크립트에서 비동기 작업을 처리할 때 유용하게 사용되는 개념이다. 특히 Promise Chainning(프라미스 체이닝)을 통해 여러 비동기 작업을 순차적으로 처리할 수 있다.

공부하면서 이 과정에서 등장하는 '기존 프라미스'와 '반환된 프라미스'의 차이점을 이해하는 데 어려움이 있었다. 그래서 이번 글에서는 이 부분을 중점적으로 남겨본다.

1. 프라미스의 기본 개념

프라미스는 비동기 작업의 성공 또는 실패 결과를 처리하기 위한 객체이다.
비동기 작업이 완료되면 프라미스는 `resolve`를 통해 성공적인 결과를 반환하거나, `reject`를 통해 에러를 반환하게 된다.
프라미스를 사용하면 비동기 작업을 보다 직관적으로 처리할 수 있다.

2. 기존 프라미스와 반환된 프라미스의 차이점

const p = add10(0);
p.then((result) => {
  console.log(result);

  const newP = add10(result);
  newP.then((result) => {
    console.log(result);
  });
  return newP;
});

이 코드를 단계별로 분석해 보면,

2-1. 기존 프라미스

const p = add10(0);

`add10(0)`을 호출하면 프라미스 객체인 `p`가 생성된다. 이 프라미스는 `add10` 함수의 비동기 작업이 끝난 후, 그 결과값을 `resolve`하게 된다. 여기서 `p`는 기존 프라미스라 할 수 있다. 예를 들어, `add10` 함수가 0에 10을 더하는 함수라면, 이 프라미스는 `10`이라는 값을 결과로 가지게 된다.

2-2. 반환된 프라미스

const newP = add10(result);

`p.then(...)`이 실행된 후, 첫 번째 `then` 블록 안에서 `add10(result)`를 다시 호출하게 되면 새로운 프라미스 객체인 `newP`가 생성된다. 이 프라미스는 첫 번째 작업이 완료된 후의 결과(`result`)를 이용해 새로운 비동기 작업을 수행한다. 이때 `newP`는 반환된 프라미스라고 할 수 있다.

2-3. 새로운 프라미스 반환

return newP;

`then` 블록 안에서 `newP를 반환하면, `p.then(...)`은 이제 기존의 `p`가 아니라 반환된 프라미스(newP)를 반환한다. 이렇게 하면 이후의 체이닝에서 새로운 비동기 작업을 처리할 수 있다.

3. 만약 새로운 프라미스를 반환하지 않는다면?

`then` 블록에서 `newP`를 반환하지 않으면, `p.then(...)`은 기존에 생성된 프라미스(p)를 그대로 반환한다. 즉, 새로운 프라미스가 아닌, 처음에 만들어진 프라미스(p)로 계속 체이닝이 이어진다.

반대로, 반환된 프라미스(newP)를 반환하면 이후 체이닝에서는 새로운 비동기 작업의 결과를 처리할 수 있다.

4. 요약

기존 프라미스: 처음 `add10(0)`을 호출해서 생성된 첫 번째 프라미스(`p`).
반환된 프라미스: `then` 블록 안에서 `add10(result)`을 호출해 생성된 두 번째 프라미스(`newP`)
`then` 블록 에서 반환된 프라미스를 반환하면, 그 `then`은 이제 기존 프라미스가 아닌 반환된 프라미스를 새롭게 반환하게 된다.
`then` 블록에서 새로운 프라미스(`newP`)를 반환하지 않으면, `p.then(...)`은 처음에 생성된 프라미스(`p`)로 체이닝이 계속된다. 즉, 새로운 작업이 추가되지 않고, 기존 프라미스(`p`)의 결과만 이어서 처리된다.