React Router v6 살짝 엿보기

이 글을 쓰는 시점에서 React Router v6는 아직 알파 버전이지만, 이를 가지고 놀고 앞으로 무엇을 탐색할 때가 되었습니다. 이 가이드를 통해 새로운 기능/변경 사항을 엿볼 수 있습니다!

아시다시피 리드 유지 관리자는 2018년 초에 Reach 라우터를 분기했습니다.

이 기간 동안 두 라이브러리 모두 성장했지만 Reach Router에 대한 적극적인 개발이 중단되고 곧 출시될 React Router v6 ?에 병합될 것으로 보입니다.

출시가 임박한 지금, 다음 내용을 미리 살펴보세요!

다음으로 이동…

• 는
가 됩니다.
의 큰 변화\n
• 중첩된 경로가 더 간단함
• useHistory 대신 useNavigate
• 20kb에서 8kb로

<스위치>가 <경로>가 됩니다.

이 최상위 구성 요소의 이름이 변경됩니다. 그러나 그 기능은 대부분 동일하게 유지됩니다.

// v5
import {
  BrowserRouter,
  Switch,
  Route
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/"><Home /></Route>
        <Route path="/profile"><Profile /></Route>
      </Switch>
    </BrowserRouter>
  );
}

거기에 를 드롭하면 됩니다:

// v6
import {
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

<루트>의 큰 변화

v6에서 구성요소는 가장 큰 규모의 점검을 받고 있습니다. 다행스럽게도 이러한 새로운 변경 사항으로 인해 실제로 사용하기가 더 쉬워질 것입니다!

component/render 소품은 요소 소품으로 대체됩니다.

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

v6에서는 이제 props를 전달하는 것이 훨씬 쉬워졌습니다. 이것은 v5에서 render prop의 사용을 무효화했습니다.

중첩 경로가 더 간단합니다.

v5의 중첩된 경로는 매우 명시적으로 정의되어야 했습니다. 이를 위해서는 이러한 구성 요소에 많은 문자열 일치 논리를 포함해야 했습니다. <프로필> 참조:

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

function Profile() {

  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <MyProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <OthersProfile />
        </Route>
      </Switch>
    </div>
  );
}

v6에서는 문자열 일치 논리를 제거할 수 있습니다. useRouteMatch()도 필요하지 않습니다! 결과는 유쾌하게 최소화됩니다.

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

// Approach #1
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}

// Approach #2
// You can also define all
// <Route> in a single place
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  )
}

참고: 구성 요소는 React Router v6에서 {this.props.children}처럼 사용됩니다. 이것은 Reach Router의 매우 인기 있는 기능이었습니다!

useHistory 대신 useNavigate

프로그래밍 방식으로 탐색하고 싶을 때가 있습니다. 예를 들어 사용자가 양식을 제출한 후 확인 페이지로 리디렉션되어야 합니다. 이것은 v5의 useHistory 라이브러리이며 v6에서 useNavigate로 이름이 변경되었습니다.

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

이제 history.push()는 navigate()로 대체됩니다.

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

경우에 따라 새 URL을 푸시하는 대신 브라우저 기록에서 URL을 교체하고 싶을 수 있습니다. 이것은 v6에서 약간 변경되었습니다.

// v5
history.push('/home');
history.replace('/home');

// v6
navigate('/home');
navigate('/home', {replace: true});

20kb에서 8kb로

이러한 모든 변경으로 인해 번들 크기가 커질 것으로 예상되지만 실제로는 절반으로 줄어듭니다! v5의 축소된 번들은 ~20kb이고 v6은 ~8kb에 불과합니다.

번들 크기는 BundlePhobia 도구를 사용하여 계산됩니다.

결론

저는 React Router v6의 출시에 매우 흥분됩니다. 이 기사가 출시될 때 무엇을 기대해야 하는지에 대한 아이디어를 제공했기를 바랍니다(곧 출시될 예정입니다)! React Router v6에 대한 자세한 내용은 최신 릴리스 노트 ?에서 확인할 수 있습니다.

새로운 기능의 전체 목록은 공식 React Router v6 마이그레이션 가이드 ?를 참조하세요.