react-router-dom@6
react-router-dom의 업데이트 되면서 6버전이 나왔다. 저번에 한 번 보기는 나왔다는 걸 보기는 했는데 이번에 프로젝트에 한 번 도입해보기로 했다.
개인적으로
훨씬 사용하는 방법이 편해진 것 같다. documentaion 페이지만큼이나 컴포넌트나 hook의 이름 그리고 사용방식도 보다 단순하고 깔끔해진 것 같다. 예를 들면 <Switch/>가 <Routes/>로 바뀌었다. useHistory 가 useNavigate로 바뀌었다 던가 등이 있다.
예전에는 지금보다 익숙하지 않아서 그런지는 몰라도 조금 사용하기 귀찮다고 느껴졌는데 바뀐 모습이 훨씬 좋은 것 같다.
@6와 @5의 차이가 자세히 설명된 블로그
바뀐 내용에 대해서 자세한 점은 아래 블로그에서 정말 상세하게 설명해 주시고 계신다.
React react-router-dom v6 업그레이드 되면서 달라진 것들
Link vs NavLink
<NavLink/>를 활용하면 styled components처럼 isActvie props를 받아 동적으로 style을 설정할 수 있는 모양이다.
A
<NavLink>is a special kind of<Link>that knows whether or not it is “active”.
=React Router | API Reference
Switch
@5에서 <Swtich/>가 <Routes/>로 바뀐 김에 실제 네트워크에서 스위치의 역할이 궁금해서 찾아본 내용들이다. 스위치가 Linked Layer에서 사용되는 장비이니까 흠 라우터라면 사용하면 안되서 바꾼 것일까. 개인적으로는 Routes가 보다 명확한 말이라 좋긴 하다.
참고:
https://ko.gadget-info.com/difference-between-router
네트워크 스위치와 허브, 라우터는 어떻게 다른 걸까 - ITWorld Korea
컴포넌트 전달
Route :component 에서 :element로 네이밍 변경되었다고 한다.
element 에서는 굳이 컴포넌트를 반환할 필요없이 바로 전달하면 된다고 한다.
//@5
<Route component={()=><MyComp/>} />
//@6
<Route element={<MyComp/>} />나는 보니까 <>(angle bracket)을 깜빡하는 실수를 자주 하는 것 같다.
중첩 route와 <Outlet/>
의 사용은 필수가 아니라고 한다.
해당 컴포넌트에서 내부에서 <Routes> <Route/> </Routes>로 사용해도 된다고 한다.
그게 싫다면 라우터의 구조를 관리하는 module에서 전체적인 레이아웃을 짜고 <Outlet/>을 활용하여 자식(?) 라우터의 컴포넌트를 렌더링 하면 된다.
option: replace가 뭘까
replace 옵션을 redirect할 때 사용할 수 있길래 무엇인가 해서 찾아보았다.
일단, push와 replace의 다른 점은 둘다 페이지의 이동을 강제한다.
push의 경우 historyAPI에 내역이 남아서 뒤로 가기나 앞으로 가기가 가능하다.
하지만 replace는 방문 기록을 남기지 않아 뒤로 가기나 앞으로 가기를 통해 다시 해당 url을 갈 수 없다고 한다.
