[TIL] 22.07.14

1. react-router 6
2. react-query

💡 react-router 6

• react-router 6버전 변경 내용 요약
• useRouteMatch() → useMatch()
• Switch → Routes
• nested router → Outlet
  
  

💡 react-query

• 모든 state와 hook을 대체할 수 있음
• 사용 이유: 리액트 쿼리는 fetch에서 받아온 response data를 캐시에 저장해놓는다. 즉, 화면이 바뀔 때마다 데이터를 요청하지 않는다.
• npm i react-query
  
  

before

• coins.tsx

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

after

• index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ThemeProvider } from 'styled-components';
import App from './App';
import { theme } from './theme';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

• coins.tsx

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

• api.ts

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