Query key에 대한 추가 설명

React Query의 Query Key: 설정과 활용

Query Key는 React Query에서 데이터를 구분하고 관리하기 위한 고유한 식별자다. 캐싱, 무효화, 리패칭 등의 모든 작업은 이 Query Key를 기준으로 이루어진다. 어떻게 설정하고 활용해야 하는지 아래에서 자세히 살펴보자.

---

1. Query Key의 기본 구조

• Query Key는 보통 배열로 작성되며, 단순 문자열도 가능하다.
• 배열 형태를 사용하는 이유는 데이터를 더 세부적으로 분류하고 관리할 수 있기 때문이다.

기본 예제

useQuery({
  queryKey: ["events"], // 단순한 데이터 키
  queryFn: fetchEvents,
});

구조화된 Key

배열로 작성하면 데이터를 계층적으로 관리할 수 있다.

useQuery({
  queryKey: ["events", userId], // 이벤트 데이터 + 특정 사용자 ID
  queryFn: () => fetchUserEvents(userId),
});

• ["events"]: 모든 이벤트 데이터를 식별.
• ["events", userId]: 특정 사용자의 이벤트 데이터만 식별.

---

2. Query Key를 어떻게 설정할까?

1. 단일 Key 사용
   • 데이터 그룹이 단일 타입일 경우 사용한다.

   queryKey: ["posts"], // 모든 게시글
   

2. 동적 값 포함
   • 특정 조건에 따라 데이터를 구분해야 할 때 사용한다.

   queryKey: ["posts", categoryId], // 특정 카테고리의 게시글
   

3. 중첩된 Key
   • 데이터 계층을 더 명확히 구분할 때 유용하다.

   queryKey: ["user", userId, "posts"], // 특정 사용자의 게시글
   

4. 객체로 Key 관리
   • 복잡한 데이터를 다룰 때, Key를 객체 형태로 저장할 수 있다.

   const queryKey = ["data", { userId, filter: "active" }];
   

---

3. Query Key를 활용하는 방법

A. 데이터 캐싱

React Query는 동일한 queryKey를 사용하는 요청 결과를 캐싱한다.

const { data } = useQuery({
  queryKey: ["events"],
  queryFn: fetchEvents,
});

• 동일한 ["events"] Key로 요청하면, React Query는 캐싱된 데이터를 반환한다.
• 새로운 요청을 보내지 않아 네트워크 비용을 절감한다.

---

B. 데이터 무효화

invalidateQueries를 사용해 특정 queryKey에 해당하는 데이터를 무효화할 수 있다.

queryClient.invalidateQueries(["events"]); // 모든 이벤트 데이터 무효화
queryClient.invalidateQueries(["events", userId]); // 특정 사용자의 이벤트 데이터만 무효화

• 무효화된 데이터는 다시 요청되어 최신 상태로 갱신된다.

---

C. 데이터 갱신

setQueryData를 사용해 캐싱된 데이터를 직접 수정할 수 있다.

queryClient.setQueryData(["events"], (oldData) => {
  return oldData.map(event => 
    event.id === updatedEvent.id ? updatedEvent : event
  );
});

• 데이터 갱신은 네트워크 요청 없이 즉시 적용된다.

---

D. Query Key로 데이터 식별

Query Key를 이용해 특정 데이터를 구분하고 선택적으로 업데이트할 수 있다.

const queryKey = ["events", userId];
const { data } = useQuery({ queryKey, queryFn: fetchUserEvents });

• ["events"]와 ["events", userId]는 서로 다른 데이터를 구분하기 위한 Key로 사용된다.

---

4. Query Key 설정 팁

1. 의미 있는 이름 사용
   • Key는 데이터의 유형과 목적을 나타내도록 명명한다.

   queryKey: ["user", userId, "profile"],
   

2. 동적 값을 포함
   • Key에 동적 값을 추가해 데이터 범위를 구분한다.

   queryKey: ["tasks", { projectId: 123, status: "completed" }],
   

3. 유연한 Key 설계
   • Key를 계층적으로 작성해 무효화 범위를 유연하게 설정한다.

   queryClient.invalidateQueries(["tasks"]); // 모든 작업
   queryClient.invalidateQueries(["tasks", { projectId: 123 }]); // 특정 프로젝트의 작업
   

---

5. Query Key 예시

게시글 리스트

useQuery({
  queryKey: ["posts"], // 모든 게시글
  queryFn: fetchPosts,
});

특정 사용자 게시글

useQuery({
  queryKey: ["posts", userId], // 특정 사용자의 게시글
  queryFn: () => fetchUserPosts(userId),
});

게시글 + 필터

useQuery({
  queryKey: ["posts", { categoryId, search: "React" }],
  queryFn: () => fetchFilteredPosts(categoryId, "React"),
});

---

결론

Query Key는 React Query의 핵심 요소로, 데이터를 구조화하고 효율적으로 관리하는 데 중요한 역할을 한다. Key를 잘 설계하면 데이터 캐싱, 무효화, 갱신 작업이 간단해지고, 애플리케이션의 상태 관리가 크게 개선된다. 🚀