Tanstack Query - querykey

queryKey

react-query에서 데이터마다 고유하게 정하는 "이름표"

쿼리 키를 통해 데이터의 일관성 있는 관리와 업데이트가 쉬워짐

 

 

중요 포인트

1. 일관성 유지

 - 관련된 데이터끼리 유사한 키를 사용

ex)  게시물 관련 데이터가 모두 "post"로 시작하면, 특정 상황에서 관련 데이터를 한 번에 무효화(invalidateQueries) & 업데이트 가능

 

2. queryKey 구조

 - queryKey는 단일 문자열 ("post")이나 배열 (["post", "public"]) 형태로 만들 수 있음

 - 배열로 세분화하면 특정 조건이나 부분 데이터만 유효하게 유지하거나 무효화하는 데 유리

 

3. 고유한 키 사용

- 쿼리 키는 자유롭게 이름을 붙일 수 있지만, 중복되지 않게 고유한 키를 설정하는 게 중요

ex) "post"라는 기본 키에서 데이터를 세분화할 때, [“post”, “public”]처럼 뒤에 구체적인 정보를 추가해 의미를 분명히 할 수 있음

       또는 id 값을 받아서 특정한 게시물의 데이터만 별도로 관리할 수도 있음

 

 

쿼리 키 예시

(게시물 조회)

• 모든 게시물 조회: ["post", "public"]
• 특정 사용자의 게시물 조회: ["post", "user", userId]
• 특정 게시물 조회: ["post", "detail", postId]

→ queryKey는 데이터의 종류와 조회 범위를 명확히 구분할 수 있도록 구성하는 것이 좋다.

 

 

느낀점

의미를 잘모르고 사용했을 당시에는 쿼리 키에 테이블을 적는 줄 알았는데,  관리할 데이터마다 내가 직접 붙이는 이름표였다니,,

강의에서 배웠을땐 그렇구나 하면서 단순하게 이해했다고 생각했는데, 이번에 직접 사용해보면서 착각이었다는걸 느끼게 되었다.

역시 뭐든지 간에 직접 해봐야 이해하고 체득하나보다.