[react-router-dom] React Router v6에 도입된 새로운 Navigate API - Redirect 대체하기

 

최근에 react-router-dom을 쓰려고 보니 버전 업이 되어서 기존에 알던 v5의 사항들이 많이 바뀐 것을 알았다. 가령 Switch가 Routes로, Redirect가 Navigate 등으로 대체되는 것이 있었는데, 좀 더 확실히 이해 가능한 컴포넌트 이름으로 변경되기도 했고, 기존 rediect 문제를 해결하기 위해 Navigate API가 도입되기도 했다. 아래는 공식 문서를 읽으면서 필요한 내용만 정리해보았는데, 더 자세한 내용은 이곳에서 확인할 수 있다.

 

공식 문서에서 말하길, 우선 v5와의 하위 호환성을 유지하기 위한 패키지는 조금 시일이 걸릴 것 같다고 한다. 몇 가지 추가되는 routes가 있을 것인지, 변경될 것이 있을지는 모르겠지만..!

We recommend waiting for the backwards compatibility package to be released before upgrading apps that have more than a few routes.

개요

신규 리액트 업데이트에 맞춰 몇 가지 기능이 신규 도입되었다. 앞서 말한 것처럼 v6는 v4, 5에 비해서 많은 변화가 있었다. 예전 코드 중 일부를 버전업을 해보면서 어떻게 달라졌는지 보려고 한다.

아래는 이전 리액트 프로젝트의 package.json. react-router-dom이 6 버전 이전이라면 업그레이드 해봄직하다. 

    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"

React v16.8로 업그레이드

리액트는 이미 버전 17을 쓰고 있었다. React Router v6는 리액트 훅을 많이 쓰고 있어서, 16.8 버전 이상을 권고하고 있다.

React Router v5.1로 업그레이드하기

만일 5.1 버전 이전의 것을 쓰고 있었다면, 우선 5.1 버전으로 먼저 업그레이드 하고, 그 이후에 v6로 넘어가는 것이 수월하다고 설명하길래 한 번 짚고 넘어가기로 했다. 이런 저런 스택오버플로우 답변들을 보면 여러 버전의 코드를 섞어서 보기 때문에 구분할 줄 알면 현재 코드 사항에 맞게 적용하기가 더 쉬울 것이다. 

// v5.1 이전의 v4 또는 v5

function User({ id }) {
  // ...
}

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route
        path="/users/:id"
        render={({ match }) => (
          <User id={match.params.id} />
        )}
      />
    </Switch>
  );
}

render props를 통해 컴포넌트를 다루었다면, v5에서는 children props를 통해서 컴포넌트를 전달했다. 그리고 usePramas 훅을 통해 전달되는 params 값을 받을 수 있었다.

// v5.1 preferred style
function User() {
  let { id } = useParams();
  // ...
}

function App() {
  return (
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      {/* Can also use a named `children` prop */}
      <Route path="/users/:id" children={<User />} />
    </Switch>
  );
}

v6를 포함해 v5는 이런 식의 컴포넌트 대신 elements 를 쓰는 것을 선호한다.

즉, 이번 버전에서는

• <Route render>나 <Route component> 대신 <Route children>을 쓸 것
• location, params 같은 state에 접근하고자 할 때는 hook을 쓸 것
• <Switch> 내부에 존재하지 않는 <Route>는 모두 <Switch> 안에 제대로 위치하도록 하거나 useRouteMatch로 대체할 것.

React Route v6으로 업그레이드 하기

<Switch> 안에 있는 <Redirect> 제거하기 : <Navigate> API

기존에는 Redirect를 원할 때 아마 이런 식으로 코드를 작성했을 것이다.

import { Switch, Route, Redirect } from "react-router-dom";

function App() {
  return (
    <Switch>
      <Route path="/home">
        <HomePage />
      </Route>
      <Redirect from="/" to="/home" />
    </Switch>
  );
}

즉, 브라우저나 리액트의 Node.js 서버 환경에서 유저가 앱의 / URL에 도달했을 때, 자동으로 /home으로 이동시켜주는 코드이다. 브라우저 환경에서 <Redirect>가 하는 역할은 초기 렌더 시에 history.replaceState()를 해주는 것이다.

 

하지만 이슈가 몇 가지 있는데, 가령 브라우저에서의 리다이렉트는 사실상 리다이렉트가 아니라고 한다. 원래 클라이언트가 요청했던 URL에 대해서는 서버가 status code 200으로, 유효한 HTML 페이지를 서브하게 된다. 만일 검색엔진 크롤러로 들어온 요청이었다면, 유효한 HTML이 서브되니, 해당 인덱스가 진짜 인덱스 페이지로 인식할 것이다. 의도대로 redirect해서 보낸 페이지에 대해서는 신경쓰지 않으므로 SEO에 좋지 못하다.

 

혹시 서버 상에서의 초기 렌더 시의 redirect 이슈에 대해서는 이 문서를 더 읽어보면 좋다. 위 내용도 문서에서 포함하고 있다. 

 

이를 해결하려면 React를 렌더하기 전에 바로 서버 상에서 리다이렉트하고, 적절한 status code를 보내면 된다. 서버 사이드 렌더링 앱이 아니라면 초기 렌더링 시에 아래처럼 코드를 짤 수 있다.

 

import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/" element={<Navigate replace to="/home" />} />
    </Routes>
  );
}

어디까지나 서버 사이드 렌더링 앱이 아닐 때 쓸 수 있다. navigation은 React.useEffect()로 인해 일어나는 라이프 사이클이라는 점!

 

<Navigate> 엘리먼트는 useNavigate() 훅의 declarative version이라 볼 수 있는데, 이전 버전에서 <Switch> 바깥의 <Redirect>를 대체할 목적으로 좋다.

<Navigate replace>에서 replace prop은 history.replaceState()를 쓸지 여부를 묻는다.