워터폴

React v18 버전부터 Suspense를 공식적으로 지원한다. Suspense는 컴포넌트 렌더링에 필요한 특정 작업이 완료되지 않았음을 React에게 알려주는 매커니즘이다. 이 특정 작업은 여러가지가 있겠지만 Data Fetching 같은 비동기 작업인 경우가 가장 많다. Suspense를 이용하면, 데이터를 다 불러오지 못한 컴포넌트의 렌더링을 잠시 중단시키고 Loading 화면 같은 다른 컴포넌트를 먼저 보여주도록 할 수 있다. 💡 Suspense는 React Query, SWR 같은 Data Fetching 라이브러리와 함께 사용할 수 있도록 설계됐다. Data Fetching 라이브러리에선 옵션 인자를 전달하는 방식으로 Suspense 기능을 활성화 할 수 있다. 예를들어 useSWR에선 세..