Suspense — React: From Zero to hero — Part 30 (2024)

React Suspense는 비동기 작업이 완료될 때까지 컴포넌트를 렌더링하지 않는 React 컴포넌트입니다. ⏳

react.lazy 함수를 사용하여 코드 로딩을 이벤트 기반으로 지연시키고, 아닐 경우 Suspense로 감싸서 로딩 중일 때 대기 화면을 표시합니다.

Suspense 컴포넌트 내부에 fallback을 사용하여 로딩 중인 내려오는 컴포넌트를 구현합니다. 🚧

React Suspense를 적절히 활용하면 서버 측 렌더링에도 사용 가능합니다. 🌐

하지만 react.lazy를 과도하게 사용하면 브라우저 오류가 발생할 수 있으므로 주의해야 합니다.🚨