리액트쿼리

React

[React] React Query 알아보기 03 - React Query with SSR

React 앱의 전통적인 방식과 변화기본적으로 React는 SPA입니다.이 말은 즉 초기에 HTML 껍데기와 js 번들을 제공하고 이후에는 js를 이용하여 컨텐츠를 렌더링하는 방식을 사용한다는 뜻입니다.하지만 최근들어 NextJs가 많은 인기를 얻고, 다시 MPA에 대한 관심이 올라갔습니다.이러한 변화에 맞게 리액트 쿼리를 서버에서 사용하는 방법과 그 이점을 알아보려합니다. Server Components에서 React Query의 존재 의미서버 컴포넌트는 기본적으로 컴포넌트 자체에서 데이터를 가져오는 기능을 제공합니다.export default async function App() { const { data } = await fetchData(); // ...} 여기서 생기는 의문은 Server C..

React

[React] React Query 알아보기 02 - React Query with Suspense

Suspense의 필요성서버 상태를 다룰 때, 중요하게 고려해야 할 점 중 하나가 데이터를 요청하는 시점과 실제로 데이터를 받는 시점 사이에 일정한 시간이 존재한다는 점입니다.이 말은 즉, 데이터를 요청해도 즉시 도착하지 않을 뿐더러 언제 도착할지, 실제로 도착할지 모른다는 점입니다.리액트 쿼리에서는 이러한 부분을 해결하기 위해 `status`를 다루는 `isLoading`, `isPending` 등을 이용하여 데이터의 상태를 다루었습니다. 예를 들어 아래와 같습니다.function useIssues(search) { return useQuery({ queryKey: ['issues', search], queryFn: () => fetchIssues(search), enabled: se..

joseph0926
'리액트쿼리' 태그의 글 목록