React와TanStackQuery의 만남 useSuspenseQuery

Tanstack Query v5로 업데이트 되면서 Suspense 기능이 정식으로 통합되었습니다. 이 기능은 React 18 에서 도입된 Suspense와 함께 작동하며, 비동기 데이터 로딩을 더욱 간편하고 직관적으로 처리할 수 있게 해주는데요.

useSuspenseQuery는 React의 Suspense 기능과 TanStack Query를 결합한 매우 유용한 훅입니다. 이 훅을 사용하면 비동기 데이터 로딩과 상태 관리가 크게 간소화할수 있는데요. 다음은 useSuspenseQuery의 주요 특징입니다.

1. Suspense 지원:

   1. React의 Suspense와 원활하게 통합되어, 로딩 중에는 가장 가까운 Suspense 경계로 예외를 던집니다.

   2. useSuspenseQuery는 내부 Promise를 React Suspense에게 throw 하는 형태로 구현되었습니다. 따라서 React는 throw된 useSuspenseQuery의 Promise를 감지하고, 가장 가까운 Suspense 경계에서 이를 ‘캐치’하여 화면에 렌더링 합니다.

2. 간소화된 상태 처리:

   1. useQuery는 로딩 상태를 직접 처리해야 하지만, useSuspenseQuery는 로딩 중에는 가장 가까운 Suspense 경계 내에서 로딩 상태를 처리하기 때문에 별도의 로딩 상태를 명시적으로 처리할 필요가 없습니다.

   2. 에러 상태역시 별도로 처리할 필요 없이 가장 가까운 Error Boundary로 전달되어 자동으로 처리됩니다.

   3. data 반환 값의 status가 언제나 success를 반환하므로 데이터 존재 여부를 위한 옵셔널 체이닝이 필요 없습니다. 이전 useQuery(V4) 는 처음 반환값이 ‘undefined’ 를 반환하고 이후에 ‘data’를 반환했는데요. useSuspenseQuery는 suspense 옵션이 기본적으로 true이고, status가 언제나 success인 data 값을 반환합니다.

3. 주의사항:

   1. Suspense와 Error Boundary를 상위 컴포넌트에 반드시 감싸서 사용해야 합니다. Suspense는 로딩 중의 UI를 처리하고, Error Boundary는 에러 발생 시 대체 UI를 렌더링합니다.

useQuery를 적극적으로 사용하셨다면 이제 useSuspenseQuery를 사용해보세요. useSuspenseQuery는 비동기 데이터를 더욱 간편하게 처리할수 있고, React와도 잘 어우러져 작동합니다. 코드가 간결해지고 유지보수도 더욱 쉬워집니다. 개발자는 데이터 상태 관리에 시간을 쏟는 대신, 비즈니스 로직과 UI 구현에 더 집중할 수 있습니다.

https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery