기본 개념

React - useParams

라우터 사용 시 파라미터 정보를 가져올 때 사용한다. key, value를 쌍으로 가져온다.

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
// Get the userId param from the URL.let { userId } = useParams();
// ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );

React-Query

1. Important Defaults

useQuery, useInfiniteQuery 를 통한 쿼리 인스턴스는 기본적으로 캐시된 데이터를 오래된(stale) 데이터로 간주합니다.

이 동작을 변경하려면 staleTime 옵션을 변경하여 글로벌 또는 각 쿼리 당 데이터를 refetch하는 시간 간격을 조정할 수 있습니다.

오래된 쿼리는 아래와 같은 경우 백그라운드에서 자동으로 다시 가져옵니다.

• 쿼리의 새 인스턴스가 마운트 될 때 ( 가져온 정보가 마운트 )
• window가 다시 포커스 될 때
• 네트워크가 다시 연결될 때
• 쿼리의 refetch interval이 설정되어 있을 때

refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval의 옵션들을 사용하여 인터벌을 설정할 수 있습니다.

useQuery, useInfiniteQuery, query observer의 활성 인스턴스가 더 이상 없을 경우 inactive로 지정되고 나중에 다시 사용할 경우를 대비하여 캐시에 남아있습니다.

기본적으로 inactive 쿼리는 5분 뒤에 가비지 콜렉팅 (더 이상 메모리에서 사용하지 않도록 하는것) 됩니다.

쿼리의 기본 cacheTime을 1000 * 60 * 5가 아닌 다른 값으로 변경할 수 있습니다.

실패한 쿼리를 캡쳐하여 UI에 에러를 표시하기 전에 3회 자동으로 retry합니다.

이를 변경하려면 쿼리에 대한 retry, retryDelay 옵션을 다른 값으로 설정해주면 됩니다.