Promise와 Promise.all의 개념

팀원의 코드에서 Promise로 setState를 처리하는 과정에서 어떤 건 안 되고 어떤 건 되는 경우가 있었다.

// 안 됨
const reqPromise = new Promise((resolve, reject) => {
  setData({ language: language!, email: email!, result: survey });
});
reqPromise.then(() => mutation.mutate(data));

// 됨
Promise.all([
  setData({ language: language!, email: email!, result: survey }),
]).then(() => {
    mutation.mutate(data);
  });
}};

원인을 다같이 얘기해보니 new Promise로 생성되는 객체는 promise이고
콜백 함수 내부의 비동기 로직이 성공하면 resolve, 실패하면 reject를 실행한다.

하지만 위 코드의 new Promise 안에 들어 있는 setData는 비동기 로직이 아니어서인지 setData가 실행되지 않았다.

또한 setState는 반환 값이 없기(void) 때문에 반환 값이 생긴 후에 다음 라인을 실행하기 위한 async/await와 같은 역할인 Promise 객체 생성은 불필요할 것 같다는 결론도 나왔다.

Promise.all는 배열 안에 있는 모든 로직이 모두 실행되고 반환 값이 나오면 한 번에 Promise 배열로 반환하는 메서드이다.

그런데 오늘 새롭게 알게 된 것은 Promise.all의 배열 안에 들어가는 모든 값이나 로직이 반드시 Promise가 아니어도 된다는 사실이었다.

링크: MDN 공식 문서

공식 문서를 보니 '모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다'고 적혀 있었다.

예시 코드를 보니 const promise2 = 42; 라인을 통해, Promise.all 배열 안에 들어가는 값 중에 Promise가 아닌 다른 값도 들어갈 수 있다는 걸 알 수 있었다.

Chat GPT에게 물어보니 더 정확해보이는 답변이 날아왔다.

두 번째 줄부터 '이 배열의 값은 다른 프로미스일 수도 있고, 다른 자료형일 수도 있습니다. ' 를 보면 알 수 있다.

command로 눌러 보았을 때 Promise.all의 반환 값은 Promise 배열이었다. 하지만 안에 들어가는 값은 꼭 모두 Promise일 필요가 없어서 맨 위의 setData 코드가 잘 작동했던 것이었다.

// 맨 위 코드에서 '됨' 코드를 다시 가져옴

Promise.all([
  setData({ language: language!, email: email!, result: survey }),
]).then(() => {
    mutation.mutate(data);
  });
}};

Promise와 관련 개념들에 대해 좀 더 공부해봐야겠다는 생각이 드는 이슈였다.