🤔 사용 목적

state 관리를 편하게 하고 싶다.

서버로부터 받아올때 비동기로 함께 동작하는 state가 보기 싫어서(and UseEffect도....) react query를 사용해보았다. isLoading, isError, refetch, ...등등

	// example reactjs
	const [isLoading, setLoading] = useState(true);
	const [data, setData] = useState([]);
	const ...
    const ...
    ...
    // 계속 늘어나는 state들 💦

🎨 install package

먼저 react-query를 설치해준다.

• npm javascript, typescript

	npm i react-query
	npm i @types/react-query

• yarn javascript, typescript

	yarn add rect-query
    yarn add @types/react-query

🚀 QueryClientProvider

<QueryClientProvider> 컴포넌트로 <App />을 감싸주고 client={queryCLient}도 추가해준다.
기본 세팅 끝! 👍

	import { QueryClient, QueryClientProvider } from "react-query";

	const queryClient = new QueryClient();

	export default function App() {
  	return (
    	<QueryClientProvider client={queryClient}>
      	<Home />
    	</QueryClientProvider>
  	);
	}