비동기 경계를 위한 Suspense(개념)

목표: 비동기적으로 로드되는 UI의 일부를 Suspense로 감싸세요. 기다리는 동안 대체 화면(스피너, 스켈레톤)을 렌더링합니다.

• 경계: 지연시키려는 가장 작은 영역
• 대체 화면: 로드하는 동안 표시할 내용
• 나머지 화면은 계속 사용할 수 있게 유지

React.lazy로 컴포넌트를 지연 로드하세요. Suspense는 컴포넌트를 "로드하는" 동안 작은 대체 화면을 보여 줍니다.

경계를 중첩하면 한 영역의 지연이 다른 영역을 차단하지 않게 할 수 있습니다. 각 경계는 자체 대체 화면을 보여 줍니다.

• 로드되는 부분만 감싸세요
• 작고 유용한 대체 화면(스피너, 스켈레톤)을 선택하세요
• 서로 독립적인 영역에는 중첩된 경계를 사용하세요

참고:

• Suspense는 일시 중단되는 컴포넌트와 함께 작동합니다(예: React.lazy, Suspense를 지원하는 데이터 라이브러리).
• 기다리는 동안 대체 화면이 렌더링되므로 대체 화면 안에 처리 비용이 큰 로직을 넣지 마세요.

요약: 느린 부분을 Suspense로 감싸고 유용한 대체 화면을 제공하세요. 서로 독립적인 부분이 별도로 로드되도록 중첩된 경계를 사용하세요.