Suspense와 선언적으로 Data fetching처리

간단 소개

Suspense를 사용하여 데이터 fetching과 렌더링을 선언적으로 처리하고, 기존 방식의 문제점을 해결하는 방법을 설명합니다.

AI Summary

Suspense와 데이터 fetching 방식 비교
- Fetch-on-render, Fetch-then-render 방식의 문제점 (경쟁 상태, Waterfall 문제, 높은 결합도)을 지적하고, Suspense를 활용한 Render-as-you-fetch 방식의 장점을 설명합니다.
- 기존 방식은 비동기 작업과 렌더링 사이의 동기화 문제, 비효율적인 작업 처리, 컴포넌트 간 결합도 증가 등의 어려움이 있습니다.
Suspense의 동작 원리 및 장점
- Suspense는 컴포넌트에서 Promise를 던져 fallback UI를 보여주고, Promise가 완료되면 실제 컴포넌트를 렌더링하는 방식으로 동작합니다.
- Suspense를 사용하면 컴포넌트들이 각자 데이터를 fetching하고 렌더링하는 것에 집중할 수 있어 컴포넌트 복잡도가 낮아지고 결합도가 감소합니다.
- 선언적인 컴포넌트 작성이 가능해지고, 경쟁 상태 문제나 Waterfall 문제를 해결할 수 있습니다.
결론 및 추가 고려 사항
- Suspense가 모든 비동기 작업을 깔끔하게 처리할 수는 없지만, 적절히 사용하면 컴포넌트의 선언성을 높이고 유지보수성을 향상시킬 수 있습니다.
- React 18의 SSR 지원과 같은 추가적인 내용도 고려할 가치가 있습니다.