Suspense와 선언적으로 Data fetching처리

간단 소개

Suspense를 사용하여 데이터 fetching과 렌더링을 선언적으로 처리하고, 기존 방식의 문제점을 해결하여 컴포넌트의 복잡도를 낮추는 방법에 대해 설명합니다.

AI Summary

데이터 fetching 방식과 문제점
- Fetch-on-render, Fetch-then-render 방식은 경쟁 상태, Waterfall 문제, 높은 결합도 등의 문제점을 야기할 수 있음
- 경쟁 상태는 UI의 일관성을 해치고, Waterfall 문제는 비효율적인 데이터 로딩을 초래
- Fetch-then-render는 컴포넌트 간의 역할 분담을 어렵게 하고 결합도를 높임
Suspense의 도입과 효과
- Suspense는 Render-as-you-fetch 방식으로, 비동기 작업과 렌더링을 동시에 시작하여 초기 상태를 즉시 렌더링하고 데이터 로딩 완료 후 다시 렌더링
- Suspense는 컴포넌트에서 Promise를 던져 fallback UI를 보여주고, Promise가 완료되면 실제 UI를 렌더링하는 방식으로 동작
- Suspense를 사용하면 동기화 코드 감소, 컴포넌트 복잡도 감소, 결합도 감소 효과를 얻을 수 있으며, 컴포넌트를 더 선언적으로 만들 수 있음
결론 및 추가 고려 사항
- Suspense는 모든 비동기 작업을 깔끔하게 처리할 수 있는 것은 아니지만, 적절히 사용하면 컴포넌트의 유지보수성을 향상시킬 수 있음
- React-query, SWR과 같은 라이브러리와 함께 사용하면 더욱 쉽게 Suspense를 활용할 수 있음