Suspense
- 서스펜스를 사용하면 자식 컴포넌트가 로딩을 완료할 때 까지 폴백 UI를 노출 할 수 있다.
- 서스펜스로 감싸지면, 리액트는 자식에게 필요한 모든 코드와 데이터가 로드 되기 전까지 로딩 폴백을 표시한다.
- 기존에는 JS 번들을 스플릿팅 하고, 웹 자원 중 코드를 지연 로딩하는데 사용되었으나, React 18 부터는 어떤 것이든 기다릴 수 있는 기능으로 확장 되었다.
- 이미지 / 스크립트 / 그 밖의 비동기 작업
서스펜스가 활성화 되는 상태
- Relay 및 Next.js 와 같은 Suspense 도입 프레임웍을 사용한 데이터 페칭 시
- lazy 를 사용한 지연로딩 컴포넌트 코드
- Suspense 는 Effect 혹은 이벤트 핸들러 내부에서 페칭하는 경우 감지하지 않음 Suspense 가 활성화 되지 않는 상태 (inactive)