안녕하세요. J4J입니다.
이번 포스팅은 React Router v5와 v6 비교하는 시간을 가져보려고 합니다.
들어가기에 앞서 주로 사용된다고 생각하는 부분들만 비교 정리를 했기 때문에 추가적으로 더 많은 것을 알고 싶으신 분들은 reactrouter 공식 문서를 참고해주시길 바랍니다.
BrowserRouter 등록
[ v5 ]
import * as React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDom.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector('#root')
);
[ v6 ]
import * as React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDom.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector('#root')
);
BrowserRouter를 등록하는 방법은 v5와 v6이 동일합니다.
Route 등록 (1)
[ v5 ]
<Switch>
<Route path='/home' component={Home} />
<Route exact path='/user' component={User} />
<Route exact path='/user/list/:id' component={List} />
<Route exact path='/user/reg' component={Reg} />
</Switch>
[ v6 ]
<Routes>
<Route path='/home/*' element={<Home />} />
<Route path='/user' element={<User />} />
<Route path='/user/list/:id' element={<List />} />
<Route path='/user/reg' element={<Reg />} />
</Routes>
첫 번째는 v5에서 Route를 등록할 때 Switch 내부에 해줬지만 v6에서는 Routes 내부에 해주도록 변경되었습니다.
두 번째는 v5에서 경로에 맞는 컴포넌트를 등록할 때 component 속성 값을 사용했지만 v6에서는 element 속성 값을 사용하는 것으로 변경되었습니다.
세 번째는 v5에서 정확한 경로를 지정하기 위해 exact를 사용했지만 v6에서는 exact가 사라지고 default로 exact가 적용되도록 변경되었습니다.
네 번째는 v5에서 하위 경로를 모두 포함해야 할 때 exact를 제외했지만 v6에서는 path에 등록하는 경로 뒤에 *를 붙이도록 변경되었습니다.
Route 등록 (2)
[ v5 ]
<Switch>
<Route path='/user'>
<Route exact path='/user' component={User} />
<Route exact path='/user/list/:id' component={List} />
<Route exact path='/user/reg' component={Reg} />
</Route>
</Switch>
[ v6 ]
<Routes>
<Route path='/user'>
<Route path='' element={<User />} />
<Route path='list/:id' element={<List />} />
<Route path='reg' element={<Reg />} />
</Route>
</Routes>
v5에서 Route에 path를 등록할 때 절대 경로만 사용할 수 있지만 v6에서는 상대 경로도 사용할 수 있게 변경되었습니다.
페이지 이동 (1) - History
[ v5 ]
import * as React from 'react';
import { Route, Switch, useHistory } from 'react-router';
import Home from './pages/home';
import User from './pages/user/user';
import List from './pages/user/list';
import Reg from './pages/user/reg';
const App = (): JSX.Element => {
const history = useHistory();
React.useEffect(() => {
history.push('/home/asd');
}, [])
return (
<Switch>
<Route path='/home' component={Home} />
<Route path='/user'>
<Route exact path='/user' component={User} />
<Route exact path='/user/list/:id' component={List} />
<Route exact path='/user/reg' component={Reg} />
</Route>
</Switch>
)
}
export default App;
[ v6 ]
import * as React from 'react';
import { Route, Routes, useNavigate } from 'react-router';
import Home from './pages/home';
import User from './pages/user/user';
import List from './pages/user/list';
import Reg from './pages/user/reg';
const App = (): JSX.Element => {
const navigate = useNavigate();
React.useEffect(() => {
navigate('/home/asd');
}, []);
return (
<Routes>
<Route path='/home/*' element={<Home />} />
<Route path='/user'>
<Route path='' element={<User />} />
<Route path='list/:id' element={<List />} />
<Route path='reg' element={<Reg />} />
</Route>
</Routes>
)
}
export default App;
v5에서 useHistory를 이용하여 페이지 이동을 했지만 v6에서는 useNavigate를 이용하여 페이지 이동을 하도록 변경되었습니다.
페이지 이동 (2) - Link
[ v5 ]
// User
import * as React from 'react';
import { Link } from 'react-router-dom';
const User = (): JSX.Element => {
return (
<div>
<h2>User Page...</h2>
<Link to='/home'>Home</Link> <br />
<Link to='/user/list/12'>UserList</Link> <br />
<Link to='/user/reg'>UserReg</Link>
</div>
)
}
export default User;
// Reg
import * as React from 'react';
import { Link } from 'react-router-dom';
const Reg = (): JSX.Element => {
return (
<div>
<h2>UserReg Page...</h2>
<Link to='/home'>Home</Link> <br />
<Link to='/user'>User</Link> <br />
<Link to='/user/list/12'>UserList</Link>
</div>
)
}
export default Reg;
[ v6 ]
// User
import * as React from 'react';
import { Link } from 'react-router-dom';
const User = (): JSX.Element => {
return (
<div>
<h2>User Page...</h2>
<Link to='/home'>Home</Link> <br />
<Link to='list/12'>UserList</Link> <br />
<Link to='reg'>UserReg</Link>
</div>
)
}
export default User;
// Reg
import * as React from 'react';
import { Link } from 'react-router-dom';
const Reg = (): JSX.Element => {
return (
<div>
<h2>UserReg Page...</h2>
<Link to='/home'>Home</Link> <br />
<Link to='..'>User</Link> <br />
<Link to='../list/12'>UserList</Link>
</div>
)
}
export default Reg;
첫 번째는 v5에서 Link를 통해 페이지 이동을 할 때 절대 경로를 사용해야 했지만 v6에서는 상대 경로도 사용할 수 있도록 변경되었습니다.
두 번째는 v5에서 부모 경로로 이동할 때 절대 경로를 사용해야 했지만 v6에서는 shell에서 cd를 사용하는 것처럼 ..으로도 이동할 수 있게 변경되었습니다.
파라미터 확인
[ v5 ]
import * as React from 'react';
import { useRouteMatch } from 'react-router-dom';
const List = (): JSX.Element => {
const match = useRouteMatch();
React.useEffect(() => {
console.log(match.params);
}, [])
return (
<div>
<h2>UserList Page...</h2>
</div>
)
}
export default List;
[ v6 (v5.1 이상) ]
import * as React from 'react';
import { Link, useParams } from 'react-router-dom';
const List = (): JSX.Element => {
const params = useParams();
React.useEffect(() => {
console.log(params);
}, [])
return (
<div>
<h2>UserList Page...</h2>
</div>
)
}
export default List;
v5에서 파라미터로 전달된 값을 확인할 때 match의 params값을 확인했지만 v6(v5.1 이상)에서는 match를 굳이 사용하지 않고 useParams를 이용하여 바로 확인 가능하도록 변경되었습니다.
리다이렉트
[ v5 ]
<Switch>
<Route exact path='/' component={() => <Redirect to='/home' />} />
<Route path='/home' component={Home} />
</Switch>
[ v6 ]
<Routes>
<Route path='/' element={<Navigate to='/home' replace />} />
<Route path='/home/*' element={<Home />} />
</Routes>
첫 번째는 v5에서 Redirect를 사용하여 리다이렉트가 이루어지도록 했지만 v6에서는 Navigate를 사용하여 리다이렉트가 이루어지도록 변경되었습니다.
두 번째는 v5에서 Redirect의 속성 값에 default, push가 사용되었던 것들이 v6에서는 순서대로 replace, default로 변경되었습니다.
참조
이상으로 React Router v5와 v6 비교하는 시간에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] React Query의 useQuery에 대해 알아보기 (5) | 2022.03.08 |
|---|---|
| [React] React Query에 대한 소개와 사용 환경 설정 (0) | 2022.03.07 |
| [React] Webpack Production모드에서 Console 출력 방지 (0) | 2022.03.04 |
| [React] StyledComponents와 Emotion을 비교해보기 (2) - css (1) | 2022.02.26 |
| [React] StyledComponents와 Emotion을 비교해보기 (1) - styled (0) | 2022.02.21 |
댓글