[리액트] react-router-dom v5와 v6의 구현 방법 비교

 

2021년에 React를 이용한 프로젝트를 진행했었다. (내 첫 프론트엔드 프로젝트)

그때 이후로 회사에 입사하면서 Next.js로만 개발하다 보니 react-router-dom를 사용할 일이 없었다.

Next.js는 pages 폴더를 이용해 자동으로 라우트를 만들어주기 때문이다.

 

리액트 멘토링을 진행하면서 2년만에 기억 저편의 react-router-dom을 다시 사용해 보게 되었다.

2년 전에 사용했던 버전은 5.2.0이고 이번에 사용하게 된 버전은 6.10.0이다.

 

v6로 업데이트되면서 인터페이스가 완전히 바뀌었다.

---

react-router-dom BroswerRouter로 라우터 구현하기

v5에서 라우팅 구현하는 방법

기존 v5에서는 <Switch />라는 컴포넌트가 존재했다.

<BrowserRouter>
    <Switch>
        <Route path="/" component={HomePage} />
        <Route exact path="/posts/:id" component={PostPage} />
    </Switch>
</BrowserRouter>

path prop에 `/posts/:id` 처럼 `:<path parameter>` 로 다이나믹 라우팅을 구현할 수 있다.

이 값은 Route의 컴포넌트에서(PostPage) props로 접근할 수 있다.

 

export default function PostPage({ match, location, history }) {
    const id = match.params.id;
    const routeToSomewhere = () => {
        history.push(somewhere);
    };
    ...
}

 

v6에서 라우팅 구현하는 방법

크게 달라진 점은 다음과 같다

1. <Switch /> 컴포넌트가 <Route />로 교체됨
2. component prop 대신 element prop을 사용.
3. route 대상인 컴포넌트에 어떤 prop도 전달하지 않음.

<BrowserRouter>
    <Routes>
        <Route path='/' element={<HomePage />} />
        <Route exact path='/posts/:id' element={<PostPage />} />
    </Routes>
</BrowserRouter>

 

더이상 prop으로 match, history, location이 전달되지 않는다.

대신 useParams와 useNavigate와 같은 Hook으로 라우팅을 구현한다.

export default function PostPage() {
    const { id } = useParams()
    const navigate = useNavigate()

    const routeToSomewhere = () => {
        navigate(somewhere)
    }
}

 

---

 

마무리

리액트는 16.8 버전 때부터 함수형 컴포넌트를 지원하고 Hook 개념을 도입하였다.

리액트가 클래스형 컴포넌트에서 함수형 컴포넌트로 넘어감에 따라 react-router-dom도 v6부터 굉장히 많은 Hook을 제공하고 있다.

 

예전에는 path parmeter를 match prop으로 넘겨줬기 때문에 prop drilling이 빈번하게 일어났다.

이를 useParams Hook으로 교체하면서 아무리 깊은 레이어에 있는 자식 컴포넌트라도 prop drilling 없이 간단하게 값을 사용할 수 있게 되었다.

 

추가로 공부해보고 싶은 것

v6에서 <Route />에 몇 가지 props가 추가되었는데, loader가 가장 눈에 띄었다.

loader는 navigate 시 데이터 패칭을 할 수 있게 해주는 것 같다.

 

보통 path parameter는 특정 데이터를 서버에 요청할 때 이용되기 때문에 이를 Route에서 바로 구현할 수 있다면 굉장히 편리할 것 같다.