React Query 사용법

React Query란?

React Query는 서버에서 데이터를 가져오고, 캐싱하고, 동기화하며, 업데이트를 관리하기 위한 라이브러리이다.

서버에서 데이터를 가져오고 저장(캐싱)하고 필요할 때 재사용하거나 업데이트 한다.

쉽게 말해, 다른 페이지에서 동일한 요청을 보낼 때, 매번 같은 요청을 보내지 않고 이미 저장(캐싱)된 데이터를 사용한다. 이때 이 데이터들을 식별하기 위해 이름 붙인 것이 query key 이다.

→ 장점: 네트워크 요청을 줄이고, 애플리케이션이 더 빨라진다.

---

Query Key란?

리액트 쿼리는 쿼리의 고유한 key를 바탕으로 해당 쿼리에 대한 캐싱을 관리한

Query Key는 React Query에서 사용자가 데이터를 식별하기 위해 지정하는 고유한 키이다. 쉽게 말해, 데이터를 저장하거나 조회할 때 사용하는 "이름표" 같은 역할을 한다.

라이브러리 내부적으로 데이터를 올바르게 캐싱하고 queryKey dependency가 변경될 때 자동으로 refetch 할 수 있다.

또한 mutations 후 수동으로 쿼리 무효화(invalidate)를 하기위해 필요하다.

사용 방법

query-key-factory

query key 설정하기

createQueryKeys는 React Query에서 쿼리 키(Query Key)를 체계적으로 관리하기 위한 유틸이다.

이를 통해 코드의 가독성을 높이고, 중복을 줄이며, 쿼리와 관련된 옵션 및 의존성을 깔끔하게 정의할 수 있다.

1. 기본 Query Key 정의

export const todos = createQueryKeys('todos', {
  detail: (todoId: string) => [todoId],
  list: (filters: TodoFilters) => ({
    queryKey: [{ filters }],
  }),
});

• todos.detail(todoId): ['todos', 'detail', todoId] 키 생성.
• todos.list(filters): ['todos', 'list', { filters }] 키 생성.

출력 결과

// createQueryKeys output:
{
  _def: ['todos'], // 최상위 기본 Query Key
  detail: (todoId: string) => {
    queryKey: ['todos', 'detail', todoId],
  },
  list: (filters: TodoFilters) => {
    queryKey: ['todos', 'list', { filters }],
  },

설명

• _def: ['todos']는 모든 todos 관련 쿼리의 최상위 루트 키입니다.
• detail(todoId): 특정 할 일의 상세 정보를 가져오는 키.
  • 예: ['todos', 'detail', '123'] (ID가 123인 할 일의 상세).
• list(filters): 필터를 기반으로 한 할 일 목록의 Query Key.
  • 예: ['todos', 'list', { filters }].

활용 예

useQuery(todos.detail(todoId));
useQuery(todos.list(filters));

---

2. Query Key와 Query Function 설정

export const users = createQueryKeys('users', {
  detail: (userId: string) => ({
    queryKey: [userId],
    queryFn: () => api.getUser(userId),
  }),
});

• 쿼리 키(queryKey)와 데이터 가져오는 함수(queryFn)를 함께 정의 가능.
• 해당 쿼리를 사용할 때 별도로 queryFn을 정의할 필요 없음.

출력 결과

// createQueryKeys output:
{
  _def: ['users'], // 최상위 기본 Query Key
  detail: (userId: string) => {
    queryKey: ['users', 'detail', userId],
    queryFn: (ctx) => api.getUser(userId), // 자동으로 사용될 쿼리 함수
  },
}

설명

• _def: ['users']는 모든 users 관련 쿼리의 기본 루트.
• queryFn: queryKey와 함께 API 요청 로직도 정의해 중복을 줄임.
  • 예: ['users', 'detail', '456'] (ID가 456인 유저의 상세).
  • 호출 시 자동으로 api.getUser(userId) 실행.

활용 예

useQuery(users.detail(userId)); // 자동으로 queryFn 실행

---

(번역) Effective React Query Keys