[Deep Dive CS - Q25,Q26] Promise

Q25. 여러 개의 비동기 작업(API 호출 등)을 처리할 때, for 문 안에서 await를 사용하는 것과 Promise.all()을 사용하는 것의 차이는 무엇인가요? 또한, Promise.all()의 치명적인 단점은 무엇이며 이를 보완하기 위해 ES11(ES2020)에서 추가된 메서드는 무엇인가요?

 

• for문 안의 await는 앞의 작업이 끝나야 뒤가 실행되는 직렬(Sequential)방식이라 총 소요시간이 늘어납니다. (서로 의존성이 없다면 비효율적 입니다)
• Promise.all()은 모든 요청을 동시에 쏘는 병렬(Parallel)방식이라 가장 느린 요청시간만큼만 걸리므로 성능상 유리합니다. 
• Promise.all()은 배열 중 하나라도 reject 되면 나머지 성공한 요청들의 결과도 무시되고 즉기 에러로 빠집니다. 부분 성공이 필요한 케이스에서는 적합하지 않습니다. 
• 대신 ES11에 도입된 Promise.allSettled()를 사용하면 성공/실패 여부와 상관없이 모든 결과를 받아 볼 수 있어, 성공한 건 보여주고, 실패한 건 재시도 하는 식의 유연한 처리가 가능합니다. 

 

 

---

Q26. 한 컴포넌트 내에서 서로 의존성이 없는 3개의 API(유저 정보, 알림, 차트 데이터)를 호출해야 합니다. useQuery 훅을 3번 연달아 작성하는 것과 useQueries(혹은 Promise.all)를 사용하는 것의 차이점은 무엇인가요? 특히 React Suspense 모드를 사용할 때 발생할 수 있는 'Waterfall' 현상과 연관 지어 설명해 주세요.

 

• 일반적인 상황(Suspense 미사용)
  - useQuery를 3번 연달아 써도, React Query는 내부적으로 비동기를 시작하므로, 기본적으로 병렬(Parallel)로 요청됩니다. (큰 문제 없음)
• Suspense 사용시
  - Suspense란, 컴포넌트가 데이터를 기다리는 동안 렌더링을 "중단(Suspend)"하고 부모에게 로딩 UI 처리를 맡기는 기술입니다. 
  - 그래서, 같이 쓰게 되면 렌더링 중단 상태에 빠져 두번째, 세번째, useQuery는 실행하지 못합니다. 
  - 결과적으로 직렬 형태로 호출하게 됩니다. => Waterfall 현상
• 해결책(useQueries)
  - useQueries 훅을 사용하면 내부적으로 병렬요청을 보장합니다.