React Router v5 릴리즈

React Router v5 가 릴리즈 되었습니다.

 

React router는 react-router, react-router-dom, react-router-native 를 설치하여 사용할 수 있습니다.

 

$ls
$ npm install react-router
# 또는
$ npm install react-router-dom
# 또는
$ npm install react-router-native

 

먼저 React router v5는

 - React router v4 (4.x) 버전와 호환됩니다.

 - React 16에 대한 지원이 향상 되었습니다.

    - <Link innerRef> 의 React.createRef에 대한 지원 향상

    - <Route component> 의 React.forwardRef에 대한 지원 향상

 - <StringMode>에 대한 지원이 향상 되었습니다

    - <React.StrictMode>에서 모든 경고가 제거 되었습니다.

 - 내부적으로 새롭게 Context API를 사용합니다.

 

구조적 개선

 이번 배포는 안정성과 호환성, 그리고 후에 있을 새로운 버전에 대한 준비에 초첨을 맞추었습니다.

 (이미 4.x버전을 사용하고 있다면, 코드의 수정없이 즉시 5버전을 사용하실 수 있습니다.)

 

 번들링 인프라에 대한 전면적인 점검과 모든 번들에 대해 테스트를 진행하였고, 이전 버전에서는 React router의 코드만 테스트 하였기에

어느 부분에서는 버그가 있을 수 있었지만 v5버전에서는 모든 빌드가 모든 테스트를 통과 하도록 하였습니다.

 

 production 페이즈를 위해 pre-optimized builds를 제공하기에 빌드 스크립트에서 process.env.NODE_ENV 를 사용 할 필요가 없습니다.

 (비록 다른 부분을 위해 사용을 원할 순 있지만).

 

 아마도 가장 중요한 변화는 아래 처럼 router에서 개별 파일을 import 하지 않아도 되며, 메인 번들에서 가지고 올 수 있습니다.

// 아래를 사용하는 대신
import Router from 'react-router/Router';
import Switch from 'react-router/Switch';

// 이렇게
import { Router, Switch } from 'react-router';

새로운 기능

새로 추가된 기능중 주요한 하나는 array를 <Route path> 에서 쓸 수 있다는 것입니다. 따라서 만약 하나의 컴포넌트에 2가지 다른 경로를 사용하고자 한다면 더이상 2개의 route를 사용하지 않아도 됩니다.

 

// 아래를 사용하는 대신
<Switch>
  <Route path="/users/:id" component={User} />
  <Route path="/profile/:id" component={User} />
</Switch>

// 이렇게
<Route path={["/users/:id", "/profile/:id"]} component={User} />

 

그리고 <Link innerRef> 의 React.createRef의 지원과 <Route component> 의 React.fowardRef에 대한 지원 및 몇 가지 수정이 포함되었습니다.