자식 컴포넌트 suspense 적용 질문 드립니다.

`Suspense`를 사용하여 스켈레톤 로딩 상태를 처리하려면, 가장 먼저 `React.lazy()`를 이용해 컴포넌트를 비동기적으로 로드하도록 해야합니다. 그리고 나서 `Suspense` 컴포넌트로 이를 감쌉니다. 아래는 기본적인 사용 예시입니다. ```jsx import React, { Suspense } from 'react'; const SomeComponent = React.lazy(() => import('./SomeComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <SomeComponent /> </Suspense> </div> ); } ``` 위 코드에서 `fallback` prop은 컴포넌트가 로드되는 동안 보여줄 JSX 요소입니다. 위의 경우에는 단순한 `Loading...` 텍스트이지만, 실제 환경에서는 여러분의 UI와 일치하는 스켈레톤 로더를 이곳에 배치할 수 있습니다. 결국, 여러분이 원하는 것은 데이터가 아직 준비되지 않았을 때 각 자식 컴포넌트가 어떻게 보일지 정의하는 것입니다. 따라서 각자 필요한 데이터에 대해 완전한 제어권을 가진 별도의 Suspense 경계선을 구성하면 됩니다. 말하자면 각각의 자식 컴포넌트가 데이터를 필요로 하는 그 지점에서 Suspense 컴포넌트를 사용하면 됩니다. 이렇게 하면 React가 자동으로 이 컴포넌트들의 렌더링을 지연시켜주고, fallback을 보여줍니다. 각각의 컴포넌트에 데이터가 도착하면 해당 컴포넌트를 보여줍니다. 이는 각각의 네트워크 요청이 완료되는 속도에 따라 다르게 작동합니다. 위 설명 대로라면 react-query의 isLoading 기능을 사용하지 않고도 각기 다른 로딩 상태를 가지는 여러 개의 자식 컴포넌트를 스켈레톤 처리할 수 있습니다. 단, 현재 `Suspense`와 `React.lazy()`는 코드 스플리팅 용도로만 사용될 수 있고, 데이터 패칭 용도로 공식적으로 아직 지원되지 않는다는 점을 알아두세요. React 팀은 현재 비동기적 로딩 상태를 위한 React Concurrent Mode 및 Suspense for Data Fetching 등을 개발 중입니다. 만약 공식 홈페이지 문서에서 이 부분이 아직 출시 전(Beta 또는 Experimental)인 것 같다면 아직 안정적인 버전이 출시되지 않았을 수 있습니다.