<React> React Router Dom V6 도입기

 

1. 배경

 최근 리액트라우터의 메이저 버전이 5에서 6으로 올랐다는 소식을 접했다. 바뀌어봤자 얼마나 바뀌었을까 싶었는데 생각보다 많은 것이 바뀌었고, 기존 프로젝트의 리액트라우터 버전을 올려보는 것도 재밌을 것 같아서 시도해보았다. 이번 포스팅에서는 기존 필자의 프로젝트에 도입하는 과정을 서술할 예정이다. 혹시라도 react-router-dom v6를 공부하고 싶어서 들어왔다면 빈약한 내용에 조금 실망할 수는 있지만 그래도 읽어본다면 도움은 되지 않을까. 

번들포비아

 흥미 외에도 도입하고 싶었던 이유는 번들 사이즈이다. 리액트라우터 v6로 올라가면서 번들사이즈가 현저하게 줄어들었다. minified 기준으로 28kB 에서 17kB 까지 줄어들었다. 프로젝트에서 수많은 리액트 라우터 기능을 쓰는 것이 아니므로 들이는 노력에 비해 쏠쏠한 이득이라고 느꼈다.

 

2. 도입

* 설치

 

 - 기존 필자의 팀 프로젝트 내의 react-router-dom 버전이다. 메이저 버전의 경우 단순히 npm i react-router-dom 과 같은 명령어로는 올라가지 않는다.

 

yarn workspace client add react-router-dom@latest

 

 - 기존에 yarn workspaces를 사용하고 있어서 위와 같이 입력하였다. npm도 마찬가지로 @뒤에 버전을 명시하거나 latest를 작성하여 최신버전을 받을 수 있다.

 

 - 설치하고나면 package.json 에 6 버전이 설치된 것을 확인할 수 있다.

 

* Routes

 - 가장 먼저 라우터의 Switch를 제거하였다. 6버전으로 넘어오면서 Switch 태그는 사라졌고 Routes로 바뀌었다. 내부에 Route 태그를 여러개 가지고 있으므로 훨씬 직관적이라고 느껴진다.

 

 

 - exact가 디폴트가 되었다. exact 키워드는 사라졌기 때문에 지워도 지장이 없다. 

 

 

 - Route에 render가 사라지고 element라는 프로퍼티가 생겼다. 기존에 콜백을 통해 작성했다면 element는 리액트 노드를 그대로 받을 수 있다. 간결하고 Props를 넘길 수도 있기때문에 활용도가 높아보인다.

 

 - Route 는 중첩도 가능하게 되었으므로 관심이 있다면 찾아보길 바란다.

 

* Navigate

// Change this:
<Redirect to="about" />
<Redirect to="home" push />

// to this:
<Navigate to="about" replace />
<Navigate to="home" />

 

 - Redirect 키워드는 전체적으로 Navigate로 변경되었다. 위는 공식문서에 나온 코드이며, 이를 참고하여 Redirect 태그를 모두 Navigate로 변경시켰다.

 

* useNavigate

 

 - useHistory가 useNavigate로 바뀌었다.

 

 

 - push메서드를 쓸 필요없이 인자에 path를 넣어서 동작한다. 데이터를 넣어야할 경우 두 번째 인자에 state를 키로 하는 값으로 객체를 만들어 넣어주면 된다.

 

 

3. 느낀점

 - 6버전에 올라오면서 키워드가 많이 바뀌어서 꽤 오래 걸릴 줄 알았지만 생각보다 쉽고 빠르게 끝이났다. 크고 복잡한 프로젝트가 아니라면 공식문서를 한 번 훑어보고 시도해보는 것도 좋겠다.

 

 - 기존에 존재하던 것들이 사라졌기 때문에 6버전으로 올리면 VS Code에 붉은 줄이 엄청나게 뜨게 된다. Router를 따로 빼두었다면 거기서 부터 붉은 줄을 하나씩 제거하는 방식으로 차례차례 수정하면 어느새 동작하는 것을 볼 수 있었다.

 

 - 무엇보다 6버전으로 올리면서 훨씬 직관적이고 깔끔한 네이밍이 마음에 들었다. 코드 량도 줄일 수 있었고, 덤으로 번들링 사이즈도 줄일 수 있으니 일석삼조다.

 

 

---

참고

 

 

React Router | Upgrading from v5