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

작성한 질문수

한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편

(4.7) 캐시 데이터 다루기 1 - 데이터 무효화 하기

'쿼리키 관리의 필요성' 도입부 설명에 대한 보충설명 필요

작성

안녕하세요, 선생님. 강의 너무 잘 듣고 있습니다! 강의 수강 중 이해가 되지 않는 부분이 있어 질문남깁니다.

질문부분: (4.7) 캐시 데이터 다루기 1 (8:05~)
질문내용: "['todos'] 에 대해 쿼리 무효화할 경우 ['todos', id] 쿼리키에 대해서도 불필요하게 리페칭이 수행된다." 부분이 잘 이해가 가질 않습니다. 구글링하고 챗지피티에 물어본 결과, 두 개는 각각 다른 쿼리키 배열로 판정될 거라고 생각했습니다. 따라서 앞선 내용의 '리페칭'은 수행되지 않을 것이라고 예상했습니다.

제가 어느 부분을 놓치고 있는지 보충 설명 해주시면 감사하겠습니다:)

답변 2

지식공유자

안녕하세요 wonza4372님 이정환입니다.

강의에서 안내드린 대로 'todos' 키를 갖는 캐시를 무효화(invalidate) 하면 해당 문자열을 포함하는 모든 쿼리키가 무효화 됩니다.

예를 들어, ['todos', id]나 ['todos', 'test'] 같이 ['todos']를 앞에 갖는 쿼리도 함께 무효화되어 리페칭이 일어날 수 있습니다.

이 내용은 Tanstack Query 공식문서에서도 다음과 같이 나와 있습니다.

위 그림에 포함된 코드블럭의 3번째 라인에 작성된 주석을 살펴보시면,
Invalidate every query with a key that starts with todos 라고 되어 있는데요

이를 한국말로 번역하면 'todos'로 시작하는 키를 가진 모든 쿼리를 무효화합니다 와 같습니다.

PS. ChatGPT에게 질의하셔서 받은 답변은 환각 현상으로 인해 언제나 잘못된 답변이 돌아올 수 있다는 점 유의 부탁드립니다. 따라서 정확한 내용은 항상 공식문서를 확인하시는게 좋습니다 😀

질문자

정성스런 답변 감사드립니다!
블로그 글을 보다가 순간적으로 서로 '같은' 쿼리, '다른' 쿼리를 비교해놓은 내용을 보고 이것과 헷갈린 것 같습니다.

늘 그랬듯 공식문서에 답이 있네요ㅎ,,
또한 ['todos', 'isDone']을 생성해서 테스트해보니 바로 답이 나왔습니다. 다음에는 공식문서 참고하고 조금 더 실험해보고 질문드리도록 하겠습니다😅

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

강의를 수강하시면서 쿼리 키 관리의 필요성에 대해 질문 주셔서 감사합니다. 이 부분은 데이터 캐싱과 관련된 중요한 개념입니다.

쿼리 무효화(invalidation)란 특정 쿼리 키로 캐싱된 데이터를 최신 상태로 유지하기 위해 특정 쿼리 키나 관련된 데이터를 재요청하는 메커니즘입니다.

쿼리키[‘todos’]와 [‘todos’, id]의 관계:
- ['todos']는 모든 todo 리스트를 가져오는 쿼리를 식별하는 데 사용됩니다.
- ['todos', id]는 특정 id를 가진 개별 todo 아이템을 식별하는 쿼리 키입니다.
- 만약 ['todos']에 대한 무효화를 하게 될 경우, 일반적으로 이와 연관된 모든 쿼리들이 최신화됩니다.
불필요한 리페칭 발생:
- ['todos']로 인해 무효화가 발생하면, 내부적으로는 React Query가 관련된 하위 쿼리들에 대한 리페칭을 트리거할 수 있습니다. 즉, ['todos', id] 또한 이 범주에 포함될 수 있습니다.
- 이는 모든 하위 항목들이 해당 리스트에 속해 있으므로, 만약 리스트가 변경되면 해당 항목들도 최신 상태로 유지되어야 한다는 기본 가정 때문입니다.

구글링이나 기본 자료에서 ['todos']와 ['todos', id]가 독립적으로 동작할 것이라고 예상하셨다면, 이론상 가능할 수 있지만, React Query의 디자인에서 상위 데이터의 변경은 하위 데이터에도 영향을 미칠 수 있습니다.

React Query에서 캐시 무효화와 리페칭 관련: React Query의 무효화 전략과 리페칭 메커니즘에 대한 추가 설명이 되어 있는 질문입니다.

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

작성한 질문수