[React-Router] v6로 적용하기

리액트의 단짝친구 리액트 라우터가 v6 버전이 나왔다..!

새로운 프로젝트에 들어가면서 리액트 라우터 v6 버전을 쓰게 되었는데 사용하면서

간단하게 달라진 점들을 정리해보고자 한다!

 

v5에서 v6 로 마이그레이션 하는 부분은 공식문서 참고

https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5

React Router | Upgrading from v5

 

1. <Switch> 에서 <Routes>로!

일단 큰 부분은 Switch 대신 Routes로 네이밍이 변경되었다. 이름이 변경된거지만 뭔가 REST 스러운..느낌?

Routes 하위에는 Route가 여러개 존재하게 된다! 👏👏👏

 

그리고 Route도 일부 변경이 되었는데 component 속성 대신 element가 났고 해당 속성에는 JSX의 형태로 태그와 함께 표현된다.

// v5

<Switch>
  <Route path="/login" component={Login} />
</Switch>

// v6
<Routes>
  <Route path="/login" element={<Login />} />
</Routes>

 

2. exact는 안녕!

명시적으로 해당 url에만 접근가능하도록 위해 exact는 필수였다. 하지만 v6에서는 아예 기본 전제가 바뀌어서 exact가 기본으로 되어있어 exact 속성이 사라지게 되었다.

그렇다면 exact 없이 있는 url 형식으로 구성하기 위해서는 * 를 사용하도록 권고한다.

//v6
<Routes>
  <Route path="member/*" element={<Member />} />
</Routes>

 

3. <Redirect />는 사라지고 ...

Redirect가 사라지고 Routes안에는 Route만 넣을 것을 권고하고 있다. 
Redirect는 Route 아래 element 속성에 Navigate로 replace속성과 to="url" 속성을 넣어줘서 redirect가 가능하도록 한다.

조금 더 불편해지긴 했지만..! 어떻게 보면 직관적인 느낌이 들수도 있는 것 같다(🥲

// v5

<Switch>
  <Redirect exact patch="/" to="login" />
</Switch>

// v6
<Routes>
  <Route path="/" element={<Navigate replace to="/login"/>} />
</Routes>

6. 중첩 라우팅

중첩 라우팅이 좀더 직관적?이게 되었다. 컴포넌트의 children과 같은 개념으로 중첩이 가능해졌다.

만약, member 와 member/:memberId 페이지가 있다고 한다면, 이전에는 각각 한줄씩 차지하였는데, v6에서는 member 라우트 하위에 :memberId 가 포함된 Route를 추가하면 중첩 라우팅이 된다. 하위에 있으면 자동으로 / 로 구분되기 떄문에 추가적인 / 를 path에 추가할 필요가 없어졌다.

직관적이라고 생각해서 좋아했는데 사실 여러 페이지를 쓰니까 뭔가 보기가 더 애매해진느낌..? 중복되는 코드를 줄인건 좋은것 같다..!

 

//v5
<Switch>
  <Route path="/member" />
  <Route path="/member/:memberId" />
</Switch>

//v6
<Routes>
  <Route path="/member">
    <Route path=":memberId" /> // /member/:memberId
  </Route>
</Routes>

 

 

5. 레이아웃

레이아웃 설정이 매우 간단해졌다. 중첩 라우팅의 구성이 되면 Outlet을 통해서 상위의 컴포넌트를 레이아웃화 할 수 있다.

이전에는 {children}을 사용해서 layout을 구성한다음에 라우트에 항상 레이아웃과 연결짓도록 했는데

<Outlet /> 을 사용하면 {children} 을 사용하는 것과 같은 효과가 난다!

 

<Routes>
  <Route path="/member" element={<Member />}>
  	<Route path=":memberId" element={<MemberInfo />} />
  </Route>
</Routes>


{/* Member */}
<div>
  <header>Member</header>
  <Outlet />  {/* MemberInfo의 component가 Outlet의 위치에 위치하게 된다. */}
</div>

 

더 많은 것들이 변경되었겠지만.. 

일단 사용한 부분에 대한 부분 기준으로 작성해보았다!

 

뭔가 편해진듯 안편해진듯..!🤷🏻‍♀️

 

자고일어나면 변화하는 프론투 생태계..!

빠릿빠릿하게 적응해야겠다..! (안됨