• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

안녕하세요, react-query 관해서 궁금해서 질문드립니다.

23.12.28 00:18 작성 조회수 490

0

react-query의 쓰임새가 잘 이해가 안가서 질문드립니다.

1. 컴포넌트가 server component 일때는 react-query에 prefetchQuery를 사용하여 미리 서버에서 데이터를 가져오고 dehydrate를 통하여 클라이언트에 전송할수있는 형태로 만들어주고,
HydrationBoundary 로 감싸여진 클라이언트 컴포넌트는 서버에서 미리 가져온 데이터를 클라이언트의 쿼리 캐시에 적용하여, getQueryData를 사용하여 네트워크 요청 없이 데이터를 가져올수있고,
useQuery 같은 경우에는 미리 가져온 데이터 외에 클라이언트에서 데이터를 가져올 때 사용하는 걸로 이해했습니다. 맞을까요??

2. queryKey 같은 경우에는 queryFn에 있는 함수에 queryKey를 넘기는 경우가 있고 안넘기는 경우가 있던데 강의에서 props에 따라 키가 바뀌는 경우에만 넘기게 된다고 이해했습니다.
그러면 server component에서 모든걸 prefetchQuery 해서 getQueryData 로 가져다 쓰지 않는 이유가 useQuery를 이용해서 key 값을 다이나믹하게 바뀌는 요청들을 컨트롤 하기 위해서라고 생각이 들었습니다.
하지만 아래와 같이 queryKey를 넘기지 않는 경우에도 useQuery를 사용하는데 prefetchQuery를 해놓고 getQueryData 를 사용할지, prefetchQuery 를 사용하지않고 useQuery를 사용할지 에 대해서 나누는 기준이 있을까요?

const { data } = useQuery<Hashtag[]>({
    queryKey: ["trends"],
    queryFn: getTrends,
    staleTime: 60 * 1000,
    gcTime: 300 * 1000,
    enabled: !!session?.user,
  });



 

답변 2

·

답변을 작성해보세요.

0

  1. 네 맞습니다. getQueryData의 설명도 맞긴 한데 prefetch된 데이터만 가져오는 건 아니고 언제든지 캐시에 있는 걸 가져올 수 있슴니다.

  2. useQuery냐 prefetchQuery냐는 데이터를 ssr할지의 차이뿐이라고 보시면 됩니다. 개인적으로 ssr하지 않는 것을 추천드립니다. useQuery(useSuspenseQuery)만 쓰셔도 무방합니다. seo같은 건 metadata로도 충분히 해결 가능합니다.

밍끼님의 프로필

밍끼

질문자

2023.12.28

빠른 답변 감사합니다.
혹시 그러면 server component 일때도 prefetchQuery 를 사용하지않고
useQuery 또는 useSuspenseQuery 를 사용하는걸 권장하시는걸까요?

사버컴포넌트에서는 아예use 시리즈를 쓸 수가 없습니다. 클라이언트 컴포넌트로 빼서 쓰셔야 합니다.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.12.28

안녕하세요, 인프런 AI 인턴입니다.

밍끼님의 질문과 관련하여 React Query의 사용법과 쓰임새에 대한 정보가 필요하신 것 같습니다. 관련하여 제로초님의 강의에서 나온 질문과 답변을 찾아드릴 수 있을 것 같습니다.

  1. 서버 사이드와 클라이언트 사이드에서 React Query를 사용하는 방법과 prefetchQuery, dehydrate, useQuery 등의 사용 예에 대한 질문은 아래 링크에서 유사한 내용을 확인하실 수 있습니다.
  1. queryKey를 사용하는 경우와 useQuery를 사용하는 기준에 대한 질문은 다음 링크에서 비슷한 상황에 대한 답변을 찾으실 수 있습니다.

해당 링크에서 강사님의 답변을 참고하시면, React Query의 사용법과 쓰임새에 대해 좀 더 자세히 알아보실 수 있을 것입니다.