React Query 기본 개념

프론트 개발을 하다 보면 서버에서 데이터를 가져오는 일이 반복적으로 발생한다.

보통은 axios 같은 HTTP 클라이언트를 사용해 API 요청을 보내고 받아온 데이터를 상태로 관리하곤 한다.

하지만 이런 방식은 중복 요청, 캐싱 처리, 리로딩 시 상태 초기화 같은 문제들이 발생한다.

이를 해결해주는 라이브러리가 React Query이다.

React Query의 핵심 역할

React Query는 크게 두가지를 도와준다.

데이터 패칭 - 서버와 통신해서 데이터를 불러옴
데이터 캐싱 - 이미 불러온 데이터를 저장해두고 같은 요청이 다시 들어오면 서버 대신 캐시를 사용

이 두가지 기능을 통해 중복 요청 방지, 빠른 UI 반응, 자동 리프레시 등을 쉽게 구현할 수 있다.

queryKey란?

React Query에서 queryKey는 데이터를 구분하기 위한 이름표다.

예를 들어, 서버에서 유저 정보를 가져오는 API가 있다고 해보자.

useQuery({
  queryKey: ["user", 1],   // queryKey
  queryFn: () => fetchUser(1),
});

여기서 [”user”, 1]은 유저 1번 데이터라는 이름표 역할을 한다.

React Query는 이 이름표를 기준으로 캐시에 데이터를 저장한다.

같은 queryKey로 다시 요청을 하면 서버에 가지 않고 캐시로 가져옴
다른 queryKey를 쓰면 별도의 데이터로 구분해서 관리

즉, queryKey = 캐시의 주소라고 생각하면 된다.

queryFn이란?

queryFn은 말 그대로 데이터를 가져오는 함수다.

보통은 axios 같은 패키지를 이용해 서버 API를 호출하는 로직이 들어간다

const fetchUser = async (id: number) => {
  const res = await axios.get(`/api/users/${id}`);
  return res.data;
};

useQuery({
  queryKey: ["user", 1],
  queryFn: () => fetchUser(1),
});

queryKey : “이 데이터는 유저 1번 데이터야”
queryFn : “이 데이터를 /api/users/1 에서 가져올 거야”

정리

패칭 : axios 같은 걸로 서버에서 데이터를 가져옴
queryKey : 데이터에 붙이는 이름표(캐싱 구분용)
queryFn : 실제로 데이터를 가져오는 함수

queryKey로 데이터를 식별하고, queryFn으로 데이터를 불러와서, React Query가 캐싱을 관리한다