컴포넌트가 일시 중단되면 가장 가까운 부모 Suspense
컴포넌트가 대체 내용을 표시합니다.
Suspense
컴포넌트를 중첩
하여 로딩 시퀀스를 생성할 수 있습니다.Suspense
경계의 대체 내용은 다음 수준의 컨텐츠가 사용 가능해질 때까지 채워집니다.예를 들어, <Albums/> 목록에 자체 대체 내용을 지정할 수 있습니다.
<Suspense fallback={<BigSpinner />}>
<Biography />
<Suspense fallback={<AlbumsGlimmer />}>
<Panel>
<Albums />
</Panel>
</Suspense>
</Suspense>
이 변경으로 인해, <Biography/>
컴포넌트는 <Albums/>
의 로딩을 기다릴
필요가 없습니다.
순서는 다음과 같습니다.
<Biography/>
컴포넌트가 아직 로드되지 않았다면, 전체 콘텐츠 영역에 대신 <BioSpinner/>
가 표시됩니다.*<Biography/>
컴포넌트가 로드를 마치면, <BioSpinner/>
에서 콘텐츠로 대체됩니다.*<Albums/>
이 아직 로드되지 않았다면, <Albums/>
와 해당 부모 패널을 대신해서 <AlbumsGlimmer/>
가 표시됩니다.<Albums/>
이 로드를 마치면, <AlbumsGlimmer/>
가 콘텐츠로 대체됩니다.*Suspense 경계
를 사용하면 UI의 어떤 부분이 항상 동시에 등장
해야 하는지, 어떤 부분이 로딩 상태의 연속으로 더 많은 콘텐츠를 점진적으로 공개
해야 하는지를 조정할수 있습니다.*
앱의 나머지 동작에 영향을 미치지 않고 트리의 어느 곳이든 Suspense 경계
를 추가, 이동 또는 삭제할 수 있습니다.
<aside> ⚠️ *모든 컴포넌트 주위에 Suspense 경계를 넣지 마세요.
Suspense 경계
는 사용자가 경험해야 하는 로딩 순서보다 더 작게 세분화되어서는 안 됩니다. 디자이너와 함께 작업한다면, 로딩 상태를 어디에 배치해야 하는지 물어보세요. 아마 이미 디자인 와이어 프레임에 포함되어 있을 것입니다.*
</aside>