TIL - React Query : React Server State Management (유데미)

https://www.udemy.com/course/learn-react-query

실전형 리액트 프레임웍이라고 할 수 있는 react query 를 주제로 하는 강의를 들었습니다.

바닐라 리액트와 멘탈 모델이 굉장히 다르다는 느낌이 들어서 이해하기가 매우 힘이 들었습니다.

화면 리프레시를 하기 위해 cache를 invalidate 하다니 뭔 말인지… 나중에 다시 한 번 들으면 나을 거라 믿습니다.

강의 프로젝트에서는 화면마다 custom hook 을 만들어서 화면 컴포넌트와 hook 을 별도의 파일로 관리합니다.

(컴포넌트 파일이 깔끔하긴 합니다)

이런 방식이 react query 프로젝트에서 일반적인 건가요?

useTreatments.ts

async function getTreatments(): Promise<Treatment[]> {
  const { data } = await axiosInstance.get('/treatments');
  return data;
}

export function useTreatments(): Treatment[] {
  const fallback: Treatment[] = []
  const {data = fallback} = useQuery({
    queryKey: [queryKeys.treatments],
    queryFn: getTreatments,
  })
  return data;
}

Treatments.tsx

import { useTreatments } from "./hooks/useTreatments";
import { Treatment } from "./Treatment";

export function Treatments() {
  // replace with data from React Query
  const treatments = useTreatments();
  return (
    <Box>
      <Heading mt={10} textAlign="center">
        Available Treatments
      </Heading>
      <HStack m={10} spacing={8} justify="center">
        {treatments.map((treatmentData) => (
          <Treatment key={treatmentData.id} treatmentData={treatmentData} />
        ))}
      </HStack>
    </Box>
  );
}