인프런 커뮤니티 질문&답변
작성한 질문수
[react-query] queryClient.prefetchQuery 사용목적 구분이 헷갈립니다.
작성
·
442
·
수정됨
0
message페이지 수정하기편에서 queryClient.prefetchQuery를 사용했는데 다른 컴포넌트에서 queryClient. prefetchQuery를 사용할때는 HydrationBoundary컴포넌트로 감싸고 state에 fetching 해온 데이터를 주입시켜서 사용했는데 여기서는 왜 아무곳에서도 사용하고 있지 않은건지 궁금합니다.
그리고 HydrationBoundary컴포넌트로 감싸고 state에 fetching해온 데이터를 주입시켜서 사용하고 있는곳들도 자식 컴포넌트에서 또 useQuery를 사용하는데 부모 HydrationBoundary에 접근해서 데이터를 사용하지 않고 useQuery로 fetching해와서 사용하는건지 궁금합니다. 저는 여태 HydrationBoundary가 fetching해온 데이터를 공유해주는 ContextAPI같은 컴포넌트라고 생각했었습니다. 자식컴포넌트에서 일일이 useQuery로 데이터를 가져오는거면 상위에 HydrationBoundary컴포넌트 안만들어줘도 되는거 아닌가요?
답변 1
0
[room] 쪽에서는 제가 하이드레이션바운더리를 빠뜨렸네요. 넣어주는 게 맞습니다.
하이드레이션 바운더리는 서버에서 쿼리한 결과물을 리액트로 전달하는 역할이 끝입니다. 전달 후에는 useQuery가 그 데이터를 받아서 사용하고 관리해야 합니다. 프론트의 useQuery가 없다면 서버로부터 받아온 데이터를 어떻게 revalidate, invalidate하실 건가요? 그래서 하이드레이션바운더리가 있더라도 useQuery도 사용되는 겁니다.
아뇨 사용할 수 있습니다. 다만 화면에 렌더링될 때 새로 데이터를 가져오게 됩니다. 서버사이드에서 데이터를 받아왔는데 그걸 재사용하지 못하고 브라우저에서 새로 데이터를 가져오는 비효율이 발생하는 것이죠.
2.번 질문에 "자식컴포넌트에서 일일이 useQuery로 데이터를 가져오는거면 상위에 HydrationBoundary컴포넌트 안만들어줘도 되는거 아닌가요?"
그럼 상위에서 HydratinBoundary로 서버에서 쿼리한 결과물을 주입시키지 않으면 childrent 컴포넌트들에서 호출한 useQuery도 사용하지 못한다고 이해하면 될까요?