MainPage에서 Suspense, lazy 로딩을 사용했더니 페이지가 나오지 않는 문제

[Kim-DaHam]

Bug Report

개요

MainPage.tsx에서 PortfolioList 컴포넌트를 lazy 로딩으로 불러오려는데 페이지 자체가 나타나지 않는 무한 로딩에 빠지는 문제가 발생했습니다.

PortfolioList.tsx 컴포넌트는 react-query의 useSuspenseQuery로 포트폴리오 목록 데이터를 서버에 요청합니다. (v4 이하의 경우 suspense:true 옵션을 지정하지만, v5부터 별도 옵션은 지정하지 않고 useSuspenseQuery를 사용합니다.)

react-query에서 비롯된 문제일까 싶어 데이터를 요청하는 코드를 모두 주석 처리하고 실행시켜 보았으나 여전히 페이지가 나타나지 않습니다.

아무런 에러도 콘솔에 나타나지 않고 페이지 자체가 불러와지지 않습니다.

📸 Screenshots

💻 Code

const PortfolioList = lazy(() => import('@/components/organisms/portfolio-list/PortfolioList'));

<PortfolioSection>
  <Suspense fallback={<PortfolioListSkeleton profile='portfolio-item'/>}>
    <PortfolioList category={category}/>
  </Suspense>
</PortfolioSection>

🙁 Actual behavior

Suspense, lazy 를 사용할 경우 해당 페이지가 아예 로드되지 않습니다.

🙂 Expected behavior

페이지가 정상 로드되어야 합니다.

[Kim-DaHam]

해결 방법

Suspense의 fallback에 들어가는 ReactNode에 오타가 있어서 발생한 문제였습니다. 오타를 수정하니 간단하게 해결됐습니다.