해당 아티클은, 리액트 쿼리를 나 고효율 axios로 사용하는 자들을 위한 글이다.

리액트 쿼리 원리를 제대로 알고 사용하지 않으면,

우리는 고효율 axios처럼 사용할 뿐이다.

리액트 쿼리를 왜 사용해야 하는지를 명확히 알아야한다.

그러려면, 클라 상태 vs 서버 상태에 대한 차이를 알고 넘어가보자.

먼저 클라 상태란, 웹 브라우저 세션과 관련된 모든 정보를 의미한다.

예를 들어 사용자는 가장 잘 아는 언어를 선택할 때나, 

테마를 밝은 상태나 어두운 상태를 선택할 수 있는데,

이는 서버에서 일어나는 일과 아무 관련이 없다.

단순히 사용자의 상태를 추적하는 것이기 때문이다.

반면 서버 상태는

서버에 저장되지만 클라이언트에 표시되는데에 필요하다.

예를들어 블로그 게시물 데이터가 해당된다.

클라이언트에 이 데이터가 있어야만 화면에 표시할 수 있다.

리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다.

리액트 코드에 서버 데이터가 필요할 때, axios를 사용해 서버로 바로 이동하지 않고, 

리액트 쿼리 캐시를 요청하게 된다.

이 것이 서버 데이터를 공급받는 것이다.

리액트 쿼리 역할은, 해당 캐시의 데이터를 유지 관리하는 것이다.

데이터를 관리하는 것은 리액트 쿼리이지만,

서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는 것은 사용자의 몫이다.

그렇다면 리액트 쿼리를 어떻게 사용해야 간지나게 사용할 수 있을까?

먼저 나의 예전 리액트 쿼리관련 코드를 살펴보자.

export const FRIEND_GIFT_QUERY_KEY: string[] = ['friendGiftData'];

const useGetFriendGift = ({ roomId }: { roomId: number }) => {
  const { data, isLoading, isError } = useQuery({
    queryKey: [FRIEND_GIFT_QUERY_KEY, roomId],
    queryFn: () => fetchFriendGift(roomId),
  });

  return { data, isLoading, isError };
};

export default useGetFriendGift;

return 값으로 data와 isLoading, isError를 설정하였다.