[React] React JS 마스터클래스_React Router v6에서 달라진 점

강의 내용: 강의 링크
#5.0 ~ #5.11

 

🚨 React Router v5 → v6에 대한 모든 변경점에 대한 정리가 아닌
      #5 강의를 수강하면서 나온 내용들에 한해서 정리된 내용입니다.

---

✅ react-router-dom v6

 

  1️⃣ Link to

    ▷ v5 버전

<Link to={{ pathname: `/${coin.id}`, state: {name: coin.name}} >
    <Img
      src={`https://cryptocurrencyliveprices.com/img/${coin.id}.png`}
    />
    {coin.name} &rarr;
</Link>

 

    ▷ v6 버전

<Link to={`/${coin.id}`} state={{ name: coin.name }}>
    <Img
      src={`https://cryptocurrencyliveprices.com/img/${coin.id}.png`}
    />
    {coin.name} &rarr;
</Link>

---

 

  2️⃣ nested Routes

  - Coin.tsx

    ▷ v5 버전

<Switch>
    <Route path={`/${coinId}/price`}>
      <Price />
    </Route>
    <Route path={`/${coinId}/chart`}>
      <Chart />
    </Route>
</Switch>

 

    ▷ v6 버전

  - Router.tsx

<Routes>
    <Route path="/:coinId" element={<Coin />}>
      <Route path="price" element={<Price />} />
      <Route path="chart" element={<Chart />} />
    </Route>
</Routes>

 

  - Coin.tsx

<Outlet />

---

 

  3️⃣ react-query

      이전에는 react-query라는 이름으로 제공되었지만,

       TanStack에서 관리하는 여러 라이브러리(React Query, Table, Router 등)와 일관성을 유지하기 위해 패키지명이 변경되었다.

   (1) 설치

npm install @tanstack/react-query

 

   (2) useRouteMatch() => useMatch()

const priceMatch = useMatch("/:coinId/price");

 

   (3) useQuery

    ▷ v5 버전

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

 

    ▷ v6 버전

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

• queryKey와 queryFn을 객체로 전달해야 함
• queryKey는 항상 배열로 전달해야 함.

---

 

  4️⃣ useParams()과 useParams()의 타입 지정 필요 여부

    ▷ v5 버전

interface RouteParams {
  coinId: string;
}

interface RouteState {
  name: string;
}

function Coin() {
  const { coinId } = useParams<RouteParams>();
  const { state } = useLocation<RouteState>();
}

        

    ▷ v6 버전

function Coin() {
  const { coinId } = useParams();
  const { state } = useLocation();
}

• useParams()와 useLocation()은 제네릭을 지원하지 않는다.
• useParams()는 기본적으로 <string | undefined> 타입을 반환한다.
• useLocation()는 기본 state 타입이  any로 지정되어 있다.
  → 타입 안정성을 위해 타입 단언(as)이나 옵셔널 체이닝(?.)을 활용

{state?.name ? state.name : loading ? "Loading..." : infoData?.name}

   👉 useParam     : 현재 URL 파라미터 값을 가져오는 hook

   👉 useLocation : 현재 URL 정보를 가져오는 hook