React Router v5에서 v6로의 업그레이드: API 단순화와 새로운 기능 소개

react-router-dom v5 → v6

react-router-dom v5

import {
  BrowserRouter,
  Route,
  Redirect,
  Switch
} from 'react-router-dom';
<BrowserRouter >
	<Switch>
    <Route path="/" exact>
      <Users />
    </Route>
    <Route path="/places/new" exact>
      <NewPlace />
    </Route>
    <Redirect to="/" />
  </Switch>
</BrowserRouter >

1. Switch:
   • Switch 컴포넌트는 그 안에 포함된 Route 중에서 첫 번째로 매칭되는 경로만 렌더링합니다.
   • 여러 Route 중에서 하나만 렌더링하고자 할 때 사용합니다.
   • 일반적으로 정확한 경로 매칭을 위해 사용됩니다.
2. Route:
   • Route 컴포넌트는 URL 경로와 컴포넌트를 매핑합니다.
   • 특정 URL 경로가 요청되었을 때 해당 경로에 매칭되는 컴포넌트를 렌더링합니다.
   • path prop을 통해 URL 경로를 지정하고, component 또는 render prop을 통해 렌더링할 컴포넌트를 지정합니다.
3. exact:
   • exact prop은 Route 컴포넌트에 사용되며, 경로가 정확히 일치할 때만 해당 **Route**가 렌더링되도록 지정합니다.
   • 예를 들어, **/about**과 /about/contact 두 경로가 있을 때, /about 경로에 exact prop을 사용하면 **/about/contact**와 같이 부분적으로 매칭되는 경로가 아닌 정확히 /about 경로일 때만 해당 **Route**가 렌더링됩니다.

이것들을 종합하면, **Switch**는 여러 Route 중에서 하나만 렌더링하고, **exact**는 정확한 경로 매칭을 지정하여 해당 **Route**가 정확히 일치할 때만 렌더링됩니다.

react-router-dom v6

import { 
	BrowserRouter, 
	Route, 
	Routes, 
	Navigate 
} from 'react-router-dom'
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Users />} />
    <Route path="/places/new" element={<NewPlace />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</BrowserRouter>

1. Switch 대신 Routes 사용:
   • React Router v6에서는 Switch 대신에 각각의 Routes 컴포넌트를 사용합니다.
   • 따라서 각 경로에 해당하는 Route 컴포넌트를 개별적으로 정의해야 합니다.
2. Navigate 컴포넌트:
   • v6에서는 Navigate 컴포넌트를 사용하여 프로그래밍 방식으로 페이지를 이동할 수 있습니다.
   • 위의 예시에서는 Navigate 컴포넌트를 사용하여 모든 경로가 일치하지 않을 때 기본적으로 "/" 경로로 이동하도록 설정되어 있습니다.

<Route element={}> 장점

React Router v5에서 v6로의 변경으로 인해 API가 단순화되고 중첩된 경로 및 속성 전달이 개선되었습니다. 주요 변경 사항은 다음과 같습니다:

요소(element) 사용:

• v6에서는 element prop을 사용하여 렌더링할 컴포넌트를 지정합니다.
• 이는 React의 <Suspense> API와 유사하며, 간단하고 직관적인 API를 제공합니다.

// v6 Route 사용법
<Route path=":userId" component={Profile} />

// 만약, 커스텀 props를 <Profile> 요소에 전달하는 방법은 무엇일까?
// 어떤 경우에는 render prop을 사용할 수 있을까?
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// 좋아, 이제 우리는 경로와 함께 무언가를 렌더링하는 두 가지 방법이 있습니다. :/

// 하지만, URL과 일치하지 않을 때 무언가를 렌더링하려면 어떻게 해야 할까?
// 다른 의미를 가진 render prop을 사용할 수 있을까?
<Route
  path=":userId"
  children={({ match }) => (
    match ? (
      <Profile match={match} animate={true} />
    ) : (
      <NotFound />
    )
  )}
/>

사용자 정의 props 전달:

• 요소를 사용하면 속성을 직접 전달할 수 있어서 passProps 구성 요소를 사용하지 않아도 됩니다.
• 이로 인해 컴포넌트 기반 API가 단순화되었습니다.

// v6 Route 사용법
<Route path=":userId" element={<Profile />} />

// 어떻게 <Profile> 요소에 사용자 정의 props를 전달할까?
<Route path=":userId" element={<Profile animate={true} />} />

// URL 매개변수나 현재 위치와 같은 라우터 데이터에 어떻게 접근할까?
function Profile({ animate }) {
  let params = useParams();
  let location = useLocation();
}

중첩된 라우팅:

• 중첩된 라우팅을 위해 **<Route>**가 children prop을 사용하게 되었습니다.
• 중첩된 경로는 상위 경로에 추가하여 경로를 구축하며, 중첩된 UI 레이아웃을 쉽게 구성할 수 있습니다.

// React Router v6 앱
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">내 프로필</Link>
      </nav>

      <Outlet />
    </div>
  );
}

이러한 변경 사항은 React Router를 더 간편하고 직관적으로 사용할 수 있도록 만들어 주며, 개발자들이 중첩된 라우팅 및 속성 전달을 보다 쉽게 다룰 수 있도록 도와줍니다.