인프런 커뮤니티 질문&답변

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

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

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

tags 및 queryKey의 사용

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

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

일치 여부

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

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

관련 참고 자료

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

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