1.fetching: 서버에서 데이터 받아오기
2.caching: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간내에 필요할 시 서버요청없이 보관된 데이터에서 꺼내쓰기
3.synchronizing: 서버상의 데이터와 보관 중인 캐시 데이터를 동일하게 만들기
4.updating: 서버데이터 변경 용이
// React Query 미사용 시
const [todos, setTodos] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const getTodos = async () => {
setIsLoading(true);
const data = await axios.get(`${API_URL}/todos`).then(res => res.data);
setTodos(data);
setIsLoading(false);
}
useEffect(() => {
getTodos();
}, []);
// React Query 사용 시
const getTodos = () => axios.get(`${API_URL}/todos`).then(res => res.data);
const { data: todos, isLoading } = useQuery(["todos"], getTodos);
// App.jsx
const queryClient = new QueryClinet();
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<Router />
</QueryClientProvider>
);
}