• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

리액트 쿼리 질문

24.03.28 15:32 작성 조회수 123

0

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됩니다.