Suspense와 비동기 데이터 fetching 처리

이 게시물은 React에서 Suspense를 사용하여 비동기 데이터 fetching을 처리하는 방법에 대해 설명합니다.

비동기 작업 처리 방법

• Fetch-on-render: 컴포넌트 렌더링 후 비동기 처리
• Fetch-then-render: 데이터를 모두 조회한 후 렌더링
• Render-as-you-fetch: 비동기 작업과 렌더링 동시 진행

Suspense 사용의 장점

Suspense를 사용하면 컴포넌트의 복잡도가 낮아지고, 각 컴포넌트가 자신의 데이터를 처리하게 되어 결합도가 감소합니다. 코드가 더 깔끔해지고 선언적 방식으로 작성할 수 있습니다.