Suspense와 선언적으로 Data fetching처리

이 글은 React에서 비동기 데이터 페칭을 처리하는 전통적인 방식들의 어려움을 설명하고, Suspense를 활용한 선언적이고 효율적인 데이터 페칭 방법인 Render-as-you-fetch를 소개합니다. Fetch-on-render와 Fetch-then-render 방식은 컴포넌트와 비동기 작업의 생명주기가 달라 경쟁 상태(Race Condition)와 같은 사용성 문제를 야기할 수 있습니다.

반면, Suspense는 비동기 작업과 렌더링을 동시에 시작하여 초기 상태를 렌더링하고 데이터 로딩 완료 후 다시 렌더링하는 방식으로, 이러한 문제들을 해결하고 더 깔끔한 컴포넌트 작성을 가능하게 합니다. React Query와 함께 Suspense를 사용하면 비동기 처리의 복잡성을 줄이고 사용자 경험을 향상시킬 수 있습니다.