inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

클라이언트 react-query

getPostRecommend() tags 속성 사용

95

그린티라떼

작성한 질문수 3

0

getPostRecommend() 함수 내부에서

tags : ['post', 'recommends']로 설정이 되어있는데, queryClient.prefetch 함수나, useQuery 함수의 queryKey와 항상 동일하게 일치시켜야 하나요? 불러온 데이터를 캐싱할 경우,

react-query에서만 관리를 키를 관리해도 되지 않을까요?

react next.js react-query next-auth msw

답변 2

0

제로초(조현영)

해당 tags는 react-query의 key와 다른 값입니다. 일치할 필요 없습니다. tags는 next 자체의 캐싱입니다.

0

인프런 AI 인턴

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

그린티라떼님이 질문하신 getPostRecommend() 함수 내부의 tags 속성 및 queryClient.prefetch 함수나 useQuery 함수의 queryKey 관련 질문에 답변드리겠습니다.

tagsqueryKey의 사용

  • tags 사용 이유: 이 속성은 서버에서의 캐시 무효화 전략에 사용됩니다. 특히, Next.js의 revalidateTag 기능과 함께 사용되어 특정 API 응답을 갱신할 수 있도록 도와줍니다. cache-control 헤더와 유사하게 동작하지만, 좀 더 세부 조정이 가능합니다.

  • queryKey: React Query에서 캐싱된 데이터를 고유하게 식별하는 데 사용됩니다. 반면에 tags는 서버-클라이언트 캐시 조작을 대부분 목적에 두고 있으며, queryKey는 클라이언트 사이드에서 동일한 요청 캐싱 문제를 해결하기 위한 것입니다.

일치 여부

  • queryKeytags는 같은 역할을 수행하지 않으므로 항상 일치시킬 필요는 없습니다. queryKey는 캐싱된 데이터를 구분하고, tags는 서버에서 데이터 갱신 등을 다룰 때 사용됩니다.

  • React Query로 충분한 상황: 클라이언트 사이드에서 데이터 캐싱만 필요하다면 queryKey를 통해 React Query 내에서 키 관리를 통해 충분히 대응할 수 있습니다. 그러나, 서버 측 데이터 무효화 전략이 필요한 상황에서는 tags의 활용이 유리합니다.

관련 참고 자료

더 깊이 있는 사용 예는 “useQuery prefetch 사용하는 법”에서 확인해보세요. 여기에서는 useQuery 사용 시 다양한 캐싱 전략을 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

캡처링부분 질문있습니다.

0

74

2

깃에 소스코드를 찾을 수 없습니다.

0

113

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

109

2

css 라이브러리 추천 부탁드립니다

0

140

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

130

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

170

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

108

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

131

2

next.js 에서 로그인에 관하여

0

138

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

97

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

229

2

fetch 캐싱과 revalidate 관련

0

84

2