algebraic effect
-
React 18 - Suspense 분석하기Study/개발 2024. 2. 21. 22:26
TL;DR Suspense는 내부에서 throw된 Promise를 감지할 수 있음. 이를 통해 data loading 로직과 ui 로직을 분리할 수 있음. Tanstack Query나 Suspend React 등을 통해 간단한 예를 만들어 볼 수 있다. 소개 기존의 Suspense 이전의 Suspense는 lazy 로드된 코드를 불러올 때 fallback UI를 노출하는데에 사용되었다. 이를 통해 code splitting을 할 수 있었다. const LazyComponent = lazy(() => import('path/to/component')); React 18 버전 React 18부터는 Data fetch에 대해서도 Suspense UI를 노출할 수 있도록 하였다. 공식 문서 공식 문서를 참고하면..