React-Query 1

react-query 사용 이전 Coins.tsx

function Coins() {
	const [coins, setCoins] = useState<CoinInterface[]>([]);
	const [loading, setLoading] = useState(true);
	useEffect(() => {
		(async () => {
			const response = await fetch('https://api.coinpaprika.com/v1/coins');
			const data = await response.json();
			setCoins(data.slice(0, 100));
			setLoading(false);
		})();
	}, []);

react-query 적용 이후 Coins.tsx

const { isLoading, data } = useQuery<ICoin[]>("allCoins", fetchCoins);

api.ts 파일에 fetch함수 생성

export function fetchCoins() {
 return fetch("https://api.coinpaprika.com/v1/coins").then(response =>
   response.json()
 );
}

async await 형식

export async function fetchCoins() {
  return await (await fetch("https://api.coinpaprika.com/v1/coins")).json();
}

React-Query 사용법

index.tsx

import { QueryClientProvider, QueryClient } from 'react-query';
const queryClient = new QueryClient();
ReactDOM.render(
 <QueryClientProvider client={queryClient}>
   <ThemeProvider theme={theme}>
     <BrowserRouter>
       <App />
       {/* App/내부에서는 props.theme으로 모두 접근 가능해짐 */}
     </BrowserRouter>
   </ThemeProvider>
 </QueryClientProvider>,
 document.getElementById('root')
);