Routing이란?
"라우팅(routing)"이란 사용자가 요청한 URL 경로에 따라 그에 맞는 UI를 보여주는 것을 라우팅이라고 합니다. React App의 경우 새로운 페이지를 요청하는 것이 아니라 URL에 맞는 페이지 컴포넌트를 렌더링해주어야 합니다.
React는 SPA(Single Page Application)로서 하나의 페이지(HTML)을 갖는 애플리케이션입니다. 즉, SPA는 하나의 HTML 파일, 하나의 URL을 가지며 이는 절대 바뀌지 않습니다.
이처럼 변하지 않는 URL이 이상적이지 않습니다.
예를 들어, URL을 다른 사람에게 공유를 하거나 북마크를 하더라도 해당 URL로 접속을 한다면 언제나 시작 페이지를 보여주게 될 것입니다.
우리는 기존처럼 하나의 페이지(SPA), 즉 하나의 HTML 페이지만을 사용하면서 URL에 따라서 화면에 보이는 UI를 바뀌도록 해야하며, URL 경로가 변경되더라도 새로운 HTML 파일을 서버로부터 요청하지도 않으면서 변경된 URL 경로에 따라 그에 맞는 화면(UI)을 사용자에게 보여주어야 합니다. 이를 구현하기 위해서 "react-router-dom" 패키지를 사용해야 합니다.
업그레이드 해야 하는 이유
- react-router 버전 업그레이드는 기존 버전의 성능 향상 목적 뿐만 아니라 새로운 시도라고 볼 수 있을 정도로 많은 변화가 있었습니다.
- react-router를 사용하며 앞으로의 버전 업그레이드와 기술 동향을 따라 가기 위해 업그레이드를 진행합니다.
업데이트 내용
번들 사이즈 최적화
react-router v6 는 아래 이미지와 같이 이전 버전 대비 약 70% 정도의 크기가 줄어들었습니다. (bundlephobia.com)
switch → routes 네이밍 변경
기존의 route들을 구성하는 부모 요소를 switch 라는 네이밍으로 사용하였는데 route의 복수개를 뜻하는 routes 로 이름이 변경되었습니다. 바뀐 네이밍이 개인적으로는 더욱 직관적이라 마음에 드는 부분입니다.
// v5
<Switch>
<Route ... />
</Routes>
// v6
<Routes>
<Route ... />
</Routes>exact 옵션 삭제
기존의 / 라우트의 경우 React Router의 디폴트 매칭 규칙으로 인해 앞 부분만 일치해도 전부 매칭되기 때문에 정확히 라우트를 일치시키고자 exact 속성을 사용하였으나,
v6부터 기본적으로 정확히 일치하도록 매칭 규칙이 변하여 v6에서부터는 exact 의 옵션을 더이상 사용하지 않습니다. 만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 다음과 같이 URL 뒤에 * 을 사용하여 일치시킬 수 있습니다.
route에서 컴포넌트 렌더링
기존 버전에서는 컴포넌트를 렌더링 하기 위해선 Route 컴포넌트의 render 속성에 arrowFunction 을 사용하여 컴포넌트를 렌더링 하는 방식으로 사용하였습니다. 물론 기본적으로는 component 속성에 넣어주기도 하지만 컴포넌트를 렌더링 해야 하는 경우는 render 속성을 사용해야 하는데 이때 arrowFunction 으로 선언되는 부분을 v6에서는 element 속성을 통해 바로 넣어줄 수 있도록 개선되었습니다. 아래 예제를 보면 v5 대비 훨씬 직관적인 코드로 작성할 수 있도록 개선된 것을 확인하실 수 있습니다.
// v5
import TestPage from './TestPage';
<Route path='test' component={TestPage} />
<Route
path='test'
render={props => (
<TestPage routeProps={props} isLogin={true} />
)}
/>
// v6
<Route path='test' element={<TestPage />} />
<Route path='test' element={<TestPage isLogin={true} />} />중첩 라우팅
v6에서는 <Route> path 지정시에 상대경로를 지정해줄 수 있게 되면서 중첩 라우팅 구현이 더 간편해졌습니다.
추가적으로 <Outlet> 컴포넌트를 활용하여 상위 컴포넌트 하나의 <Routes>에서 중첩 라우팅을 구현해 줄 수 있습니다. 이는 route 코드를 한데 모아서 구성하기에 간편하고 페이지별 구성할 componenets를 분리하기에 유용합니다.
💡 현재 프로젝트에서는 기존 v5의 절대 경로 형식을 유지하기로 했습니다.
withRouter HOC 삭제
기존 버전에서 match, location, history를 사용할 때 쓰인 HOC가 삭제되고 hooks로 대체되었습니다.
공식 문서에서도 삭제된 withRouter HOC를 대체하여 사용할 코드소스를 제공하였고, 우린 이를 응용하여 대체 HOC를 제작하여 사용하기로 하였습니다.
… 이외 데이터라우팅 기능(errorElement, createBrowserRouter)
아쉬운 점
- 추후 상황을 고려하지 않은, 당장의 얕은 생각만으로 업그레이드를 진행하여 비효율적인 개발 비용을 사용했습니다.
- ex) withRouter HOC 제작 시 기존 v5 코드를 그대로 사용할 수 있게 만들었다면 라우팅 기능을 사용하는 모든컴포넌트를 수정하지 않았을 것 같습니다.
- react-router 업데이트와 관련된 공식문서를 꼼꼼히 읽지 않고 시작하여 삽질 시간이 증가했습니다.
- 공식문서를 정독했다면 수정된 사항에 대해 더 깊은 이해도를 가지고 지금보다 더 유연한 업그레이드를 진행했을 것 같습니다.
- 현재 v6버전에서 path의 상대 경로와 절대 경로를 둘 다 사용할 수 있도록 조치 했다고 하지만 하위 구성요소에서만 사용 가능하고 중첩 요소에서는 적용되지 않았습니다.
- 해당 이슈 솔루션(https://github.com/remix-run/react-router/issues/8035)을 도움받아 공통 컴포넌트 RootRoutes를 사용하여 절대 경로를 사용했습니다.
