Suspense와 선언적으로 Data fetching처리

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

반면, Suspense는 비동기 작업과 렌더링을 동시에 시작하여 즉시 초기 상태를 렌더링하고 데이터 로딩 완료 후 다시 렌더링하는 방식으로, 더 깔끔하고 선언적인 컴포넌트 작성을 가능하게 합니다. react-query와 함께 Suspense를 도입함으로써 이러한 이점을 경험할 수 있음을 시사합니다.