[React] router / router-dom v5 → v6 버전 업 이해하기

 

해당 글에서는 react-router / react-router-dom 버전 v5에서 버전 v6으로 변경함에 따라서 추가/변경/삭제된 내용에 대해서 이해 및 적용하는 글입니다.

 

 

1) 취지

---

💡 기존 React 16.13.1 버전에서 React 17.0.2 버전으로 업데이트를 하는 경우가 생겨서 해당 버전을 버전업을 하고 나니 함께 추가적으로 React-router / React-router-dom 버전을 v5에서 v6로 올리는 작업을 진행하였습니다.

[참고]
React 16.8 버전 이상 일 경우 React Router v6 사용이 가능합니다.
이는 16.8 버전 이상부터 React hook을 사용할 수 있고, 해당 v6는 React Hook을 많이 사용함으로 필수적으로 버전을 확인해야 합니다.

• React >= 15 일 경우 React Router v5 사용이 가능합니다.
• React >= 16.8 일 경우 React Router v6 사용이 가능합니다.

 

React Router | Upgrading from v5

 

2) router / router-dom 변경 혹은 대체

---

💡 해당 부분에서는 Redirect, Switch, useHistory, Link, Route, withRouter에 대한 변경 혹은 대체된 내용에 대해서 확인합니다.

 

[참고] 공식 사이트

React Router | Docs Home

 

💡 [ 더 알아보기 ]
- React Router 란?
클라이언트 사이드 라우팅이라고도 하며 사용자가 요청한 URL에 따라서 이에 맞는 컴포넌트를 렌더링 해주는 것을 의미한다.

- 클라이언트 사이드 라우팅(CSR)
서버에게 별다른 요청을 보내지 않고 클라이언트의 브라우저 단에서만 페이지를 이동하는 기능을 의미함.

- React Router와 React Router DOM의 차이는?
react-router는 라우팅에 사용이 되는 메인 라이브러리이며, 이 react-router를 기반으로 DOM이 바인딩되어 있는 라이브러리를 의미한다.(DOM에서 사용이 가능한 라이브러리)

 

1. <Redirect> 태그는 더 이상 사용되지 않음.

💡 <Redirect> 은 일반적으로 이전 링크를 유지하고 해당 대상으로 향하는 모든 트래픽을 일부 새 URL로 보내서 끊어진 링크로 끝나지 않도록 하려는 경우에 사용됩니다.

 

대처 방안 및 사용 예시

💡 <Redirect>가 v6으로 버전업을 하게 되면서 더 이상 사용하지 않으며, 이에 대한 대안으로 <Navigate>가 기능을 대체 합니다.

💡 아래 예시에서는 “/” URL을 만나는 경우, “/login “ 페이지로 리턴하는 기능에 대한 v5, v6에 대한 예시입니다.

/**
 * React Router v5 app
 */
import { Redirect, Switch, Redirect, Route } from 'react-router-dom';

return (
    <Switch>
        <Redirect exact from={'/'} to={'/login'} />}
        <Route path={'/login'} render={(props) => <LoginPage {...props} />} />
    </Switch>
);

/**
 * React Router v6 app
 */
import { Navigate, Routes, Route } from 'react-router-dom';

return (
    <Routes>
        <Route path='/' element={<Navigate replace to='/login' {...props} />} />
        <Route path={'login'} element={<LoginPage {...props} />} />
    </Routes>
);

[참고] 관련 참고사항

React Router | Upgrading from v5

 

2. <Switch> 태그는 더 이상 사용되지 않음.

💡 <Switch>는 자식 컴포넌트 중 첫 번째 매칭 하는 Route를 렌더링 해주는 역할을 수행합니다.
(중복으로 렌더링 될 컴포넌트를 하나만 렌더링 되도록 도와줍니다)

 

💡 해당 Switch로 감싸지 않으면 호출되는 해당 호출하는 URL에 포함되는 모든 컴포넌트가 호출이 됩니다

// 해당 부분에서 '/login'를 호출하는 경우 '/' 경로도 같이 호출이 되는 경우가 발생한다.
<Route path={"/"} render={(props) => <MainPage {...props} />} />
<Route path={"/login"} render={(props) => <LoginPage {...props} />} />

 

대처 방안 및 사용 예시

💡 <Switch>가 v6으로 버전업을 하게 되면서 더 이상 사용하지 않으며, 이에 대한 대안으로 <Routes>가 기능을 대체합니다. 반드시 <Route>는 <Routes>에 감싸진 형태로 구성이 되어야 합니다.

/**
 * React Router v5 app
 */
import { Switch } from 'react-router-dom';

<Switch>
    <Route path={'/site/siteList'} render={(props) => <SiteListPage {...props} />} />
    <Route path={'/site/siteAdd'} render={(props) => <SiteAddPage {...props} />} />
</Switch>

/**
 * React Router v6 app
 */
import { Routes } from 'react-router-dom';

<Routes>
    <Route path={'/site/siteList'} render={(props) => <SiteListPage {...props} />} />
    <Route path={'/site/siteAdd'} render={(props) => <SiteAddPage {...props} />} />
</Routes>

 

[참고] 관련 참고자료

React Router | Upgrading from v5

 

3. ‘useHistory’는 더 이상 사용되지 않음.

💡 useHistory는 hook에서 ‘화면 이동’에 사용할 수 있는 정보를 가지고 hisotry 인스턴스에 접근하게 해주는 기능을 수행한다.

 

대처 방안 및 사용 예시

💡 useHistory가 v6으로 버전업을 하게 되면서 더 이상 사용하지 않으며, 이에 대한 대안으로 useNavigate가 기능을 대체합니다.

/**
 * React Router v5 app
 */
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
    pathname: "/login",
    state: {
        loginInfo: loginInfo
    }
})

/**
 * React Router v6 app
 */
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

navigate("/login", {
    replace: true,
    state: { loginInfo: loginInfo }
});

 

[참고] 관련 참고사항

React Router | Upgrading from v5

 

4. <Route> 태그의 속성 일부가 사용되지 않음

💡 <Route>는 'path' 속성으로 지정된 URL에 따라 보여주는 화면을 보여주는 기능을 수행합니다.

- component 속성: ‘path’ 경로로 호출될 경우, 렌더링을 할 페이지를 정의함
- render 속성: ‘path’ 경로로 호출될 경우, 페이지 렌더링과 함께 history, location, match와 같은 route props를 받아 올 수 있다.
- exact 속성: ‘path’에 매칭 되는 페이지만 렌더링 하도록 여부를 정의함 (true: 매칭 페이지만 렌더링, false: 매칭 페이지 외 모두 렌더링)

 

대처 방안 및 사용 예시

💡 <Route>가 v6으로 버전업을 하게 되면서 더 이상 사용하지 않으며, 이에 대한 대안으로 element 속성이 기능을 대체합니다.

/**
 * React Router v5 app
 */
import { Route, Routes, Switch } from 'react-router-dom';

return (
    <Switch>
        <Route path={"/"} render={(props) => <MainPage {...props} />} />
        <Route path={"/login"} render={(props) => <LoginPage {...props} />} />
        <Route exact={true} component={ErrorNotFoundPage} />
    </Switch>
)
/**
 * React Router v6 app
 */
import { Route, Routes } from 'react-router-dom';

return (
    <Routes>
        <Route path='/' element={<Navigate replace to='/login' {...props} />} />
        <Route path={'login'} element={<LoginPage {...props} />} />
        <Route path='*' element={<Navigate replace to='/errorPage' {...props} />} />
        <Route path={'errorPage'} element={<ErrorNotFoundPage {...props} />} />
    </Routes>
)

 

[참고] 관련 참고자료

React Router | Upgrading from v5

 

5. <Link> 태그의 속성 일부가 변경되었음.

💡 <Link>는 <a> 태그와 비슷한 개념으로 지정한 URL로 이동을 시켜주며, 페이지를 새로 불러오기 때문에 기존의 컴포넌트의 상태 값이 초기화가 됩니다.

 

대처 방안 및 사용 예시

💡 <Link>가 v6로 업그레이드되면서 속성의 일부가 변경이 되었습니다.

/**
 * React Router v5 app
 */
import { Link } from 'react-router-dom';

<Link
    to={{
        pathname: '/login',
        state: {
            loginInfo: loginInfo,
        }
    }>
        페이지 이동
</Link>

/**
 * React Router v6 app
 */
import { Link } from 'react-router-dom';

<Link 
	to={{ pathname: "/login" }}
	state={{loginInfo: loginInfo}}>
		페이지 이동
</Link>

 

[참고] 관련 참고사항

React Router | Upgrading from v5

 

6. withRouter는 더 이상 사용되지 않음

💡 withdRouter는 라우터에 의해서 호출된 컴포넌트가 아니더라도 match, location, history 객체에 접근을 할 수 있도록 도와주는 기능을 수행한다.

 

대처 방안 및 사용 예시

💡 withdRouter가 v6으로 버전업을 하게 되면서 더 이상 사용하지 않으며, 이에 대한 대안으로 React Hook인 useParams, useLocation, userNavigate을 사용합니다.

• useParams: 현재 페이지 경로의 포함된 파라미터 값을 가지고 있는 함수
• useLocation: 현재 페이지 경로를 가지고 있는 함수
• userNaviagte: 페이지 변경과 관련된 함수 (앞으로 가기 / 뒤로 가기 / 특정 페이지)

함수	설명
navigate(1)	1페이지 앞으로 이동
navigate(2)	2페이지 앞으로 이동
navigate(-1)	1페이지 뒤로 이동
navigate(-2)	2페이지 뒤로 이동
navigate(0)	새로고침

/**
 * React Router v5 app
 * Routers.js
 */
import { withRouter } from 'react-router-dom';
export const Routers = withRouter(() => {

}
export default Routers;

/**
 * React Router v6 app
 * Routers.js
 */
import { useLocation, useNavigate, useParams } from 'react-router-dom';

const Router = () => {
    const { param } = useParams();
    const location = useLocation();
    const navigate = useNavigate();

    useEffect(() => {

        /**
         * useParams() 이용 예시
         */
        console.log(`Param으로 받은 값 ${param}`)

        /**
         * Location 사용 예시 
         */
        console.log(`페이지 URL : ${location.pathname}`);
        console.log(`페이지로 전달 받은 State 값 : ${location.state}`);

        /**
         * Navigate 사용 예시 
         */
        // 로그인 페이지로 이동
        navigate("/login")

        // 로그인 페이지로 데이터를 보냄
        navigate("/login", { replace: false, state: { loginInfo: loginInfo } })

    }, []);

}
export default Router;

 

3) router / router-dom 추가

---

1. 중첩 경로 추가

💡 라우팅 맵핑을 최상위 컴포넌트뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법입니다.

 

[참고] 참고 설명 문서

React Router | Quick Start

/**
 * React Router v5 app
 */
import { Switch, Route } from 'react-router-dom';

return (
    <Switch>
        <Route path={'/user'} render={(props) => <UserListPage {...props} />} />
        <Route path={'/user/userAdd'} render={(props) => <UserAddPage {...props} />} />
        <Route path={'/user/userPwReSetting'} render={(props) => <UserPwReSettingPage {...props} />} />
        <Route path={'/user/userPwNewChange'} render={(props) => <UserPwNewChangePage {...props} />} />
    <Switch>
)

/**
 * React Router v6 app
 */
import { Routes, Route } from 'react-router-dom';

return (
    <Routes path='user'>
        <Route path={''} element={<UserListPage {...props} />} />
        <Route path={'userAdd'} element={<UserAddPage {...props} />} />
        <Route path={'userPwReSetting'} element={<UserPwReSettingPage {...props} />} />
        <Route path={'userPwNewChange'} element={<UserPwNewChangePage {...props} />} />
    </Routes>
)

 

2. not-found-routes (찾을 수 없는 경로)

💡 Router에서 정의한 URL과 일치하는 경로가 없다면 해당 방법으로 이동하도록 처리하기 위한 방법입니다. router-dom의 제일 하단에 위치시키며, path=”*” 로 정의를 한다

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

{/* React Router v5 app */}
<Switch>
    {<Redirect exact from={'/'} to={'/login'} />}
    <Route path={'/login'} render={(props) => <LoginPage {...props} />} />
    <Route path={'/errorPage'} render={(props) => <ErrorNotFoundPage {...props} />} />

    <Route path={'/user/userAdd'} render={(props) => <UserAddPage {...props} />} />
    <Route path={'/user/userPwReSetting'} render={(props) => <UserPwReSettingPage {...props} />} />
    <Route path={'/user/userPwNewChange'} render={(props) => <UserPwNewChangePage {...props} />} />

    <Route component={ErrorNotFoundPage} />
</Switch>

{/* React Router v6 app */}
<Routes>
    <Route path='/' element={<Navigate replace to='/login' {...props} />} />
    <Route path={'login'} element={<LoginPage {...props} />} />

    <Route path='user'>
        <Route path={''} element={<UserListPage {...props} />} />
        <Route path={'userAdd'} element={<UserAddPage {...props} />} />
        <Route path={'userPwReSetting'} element={<UserPwReSettingPage {...props} />} />
        <Route path={'userPwNewChange'} element={<UserPwNewChangePage {...props} />} />
    </Route>

    <Route path='*' element={<ErrorNotFoundPage />} />
</Routes>

 

[참고] 참고 설명 문서

React Router | Quick Start

 

4) 오늘의 결론

---

React-router의 버전업 내용에 대해서 확인해보았습니다.
저는 버전을 우선 올린 다음 하나씩 작업을 해 나아갔었는데, 생각보다 많이 걸리는 작업이었던 것 같습니다.
변경하실 때 잘 고려해보시고 변경하시는 것을 추천드립니다.

오늘도 감사합니다😀