인프런 커뮤니티 질문&답변
작성한 질문수
리액트 쿼리 질문
작성
·
225
1
Home에서 작성한 리액트 쿼리 컴포넌트 및 변수들 역할들이 제가 맞게 이해했는지 궁금한데요!
queryClient = new QueryClient() - 쿼리 클라이언트 초기화, 서버에서 동작하는데 클라이언트라는 의미가 어떤의미인지 잘 와닿지 않습니다. ㅠㅠ 여기서의 쿼리 클라이언트의 의미는 단순히 데이터를 담는 그릇이라고 봐도 될까요?
RQProvider.tsx에서
useState안 new QueryClient 리액트 쿼리 어플리케이션 초기화 및 리액트 쿼리 설정 -> 여기서는 데이터를 담는 그릇을 만들기보다는 리액트 쿼리 사용하기 위한 설정을 해주는 것인지?
queryClient.prefetchQuery - 쿼리 클라이언트에 SSR을 위해 프리페치를 해주는 함수
dehydrate() - 프리페치한 데이터를 클라이언트(브라우저)에서 하이드레이션하기위한 상태를 리턴하는 함수
HydrationBoundary - 리액트 쿼리 하이드레이션을 위한 컴포넌트, dehydrate()의 리턴값 dehydratedState를 기반으로 하이드레이션할지 말지 결정
답변 1
1
쿼리 클라이언트는 서버/클라이언트의 개념이 아닙니다. 리액트쿼리 동작을 수행하는 클라이언트라는 의미입니다.
RQProvider는 해당 컴포넌트 하위의 모든 자식 컴포넌트에서 react-query 기능을 사용할 수 있게 해줍니다.
prefetchQuery, dehydrate, HydrationBoundary 설명은 정확합니다. HydrationBoundary 내부에 useQuery들만 서버에서 받아온 SSR 값으로 dehydrate됩니다.