React Query에 대해 배워보자.
React Query는 클라이언트 데이터와 서버 데이터를 구분하기 위해 사용된다.
개발을 하면서 thunk를 사용하게 될 경우 코드가 너무 많아지고, 서버 데이터와 클라이언트 데이터가 공존하게 된다.
그럴 경우 구분하기도 힘들어지고, 유지 보수에도 힘이 든다.
그래서! React Query를 사용한다.
우리의 React Query는 귀찮은 일을 대신 해준다.
- 캐싱
- update를 하면 자동으로 get 수행. (게시만 게시물을 수정하면 자동으로 다시 get 수행)
- 데이터가 오래 되었다고 판단되면 다시 get. (invalidateQueries)
- 동일 데이터 여러번 요청하면 한 번만 요청 (중복 호출 허용, 시간 조절은 옵션으로.)
- 무한 스크롤 사용 가능 (Infinite Queries)
보통 최상단에서 사용한다. (App.js)
import { QueryClient, QueryClientProvider } from "react-query";const queryClient = new QueryClient();export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Root />
</QueryClientProvider>
);
}React Query는 CRUD의 R에 사용하는 useQuery와, CUD에 사용하는 useMutation으로 나뉜다.
그리고 현재 데이터는 잘못되었다고 선언하는 invalidateQueries가 있다.
// getTodoList = axios.get('url')
const { isLoading, isError, data, error } = useQuery("todos", getTodoList)const addTodo = useMutation(addPostTodo,
{
onSuccess: () => {
queryClient.invalidateQueries('todos');
// invalidateQueries가 선언되었기 때문에 'todos'라는 키값을 가진 get을 다시 실행.
},
},
);