[React 문제 노트] loading 띄우기

https://stackblitz.com/edit/react-2hsm9o?file=src%2FApp.js,package.json,src%2Findex.js

const isLoading = useIsFetching();
위 코드는 useIsFetching 을 사용해서 로딩을 표시하고 있습니다.

하지만 이 값은 페이지 전체에 공유됩니다. 즉, ETH와 BTC는 서로 다른 타이밍에 로딩이 완료됨에도 불구하고, 둘 다 완료되어야지만 둘다 표시되는 Promise.all 처럼 동작하게 됩니다.

요구사항은 이 부분을 분리하고, 먼저 로딩되면 먼저 보이도록 하고자 합니다.

(ETH가 먼저 로딩됨: ETH 표시 / BTC 로딩중)

주의사항1

• 코드를 보면 아시겠지만 Chart 컴포넌트도 수많은 쿼리를 가집니다.
• 해당 쿼리들도 모두 불러와진 이후에 로딩중 상태가 풀려야 합니다.
• 따라서 아래 코드는 답이 아닙니다.

const { data: price, isFetching } = useCoinPrice(ticker);
const isLoading = isFetching;

• 우리가 하고자 하는것은 useCoinPrice 의 로딩을 격리하는게 아니라, useIsFetching 을 컴포넌트 단위로 격리하고자 하는 것입니다.

주의사항2

• 회사 프로젝트의 React 버전이 너무 낮고, 올리기 쉽지 않은 상황입니다. 해당 이유로 Suspense는 사용할 수 없는 환경입니다. Suspense없이 구현해주세요.
• 위 제약사항은 서스펜스 없이 해결방법을 찾는것을 보기 위한 가상의 제약사항이므로, Suspense이외의 React, ReactQuery의 모든 최신 기능들은 자유롭게 사용하셔도 됩니다.