React Suspense

Suspense란?

React Suspense(리액트 서스펜스)는 컴포넌트의 렌더링을 일시 중지하고 데이터 로딩을 기다릴 수 있게 해주는 React의 기능으로 자연스러운 사용자 경험을 유도할 수 있습니다.

코드 스플리팅(Code Splitting)과 함께 사용하면 초기 로딩 속도를 개선하는 데에도 도움이 됩니다.

궁극적으로 로딩 상태를 선언적으로 처리할 수 있어서
1. 코드의 가독성
2. 유지보수성 향상
3. 사용자 경험을 개선

효과를 기대할 수 있습니다.

Suspense의 핵심 개념

lazy와 fallback이 있습니다.

lazy는 동적 임포트를 통해 컴포넌트를 필요한 시점에 로드하는 기능입니다. 이를 통해 초기 번들 크기를 줄이고 초기 로딩 속도를 개선할 수 있습니다.

fallback은 컴포넌트가 로딩 중일 때 보여줄 UI(ex : 스켈레톤 UI, 로딩 스피너)를 설정하는 props 입니다. 이를 통해서 사용자에게 콘텐츠가 로딩 중임을 알리고 현재 애플리케이션이 동작 중임을 알릴 수 있습니다.

추가적으로 children은 최종적으로 실제 UI 렌더링 시켜주는 props입니다.

React Query의 isLoding과 차이점
isLoding은 전체 페이지라면 Suspense는 비동기 작업이 끝날 때까지 해당 컴포넌트를 대체할 UI를 보여주는 기능