React # react-router-dom v6

📝오늘 배운 내용

오늘은 react-router-dom v6에 관하여 작성해보려고 한다.
고작 3, 4달전에 react 공부를 하면서 이렇게 쓰면 되는구나 하고 잘 쓰고 있던 react 라우터가 복습을 하는 과정에서 계속 에러가 발생하였다. 이게 무슨 문제일까..구글링을 해봤더니 react-router-dom 버전이 업그레이드 되어서 생기는 에러였다. 그렇다면 v6로 업그레이드 되면서 바뀐점이 있는지 살펴보자.

Switch -> Routes 네이밍 변경

• 기존에 Route를 구성하는 부모 요소를 Switch라는 네이밍으로 사용했지만 Route의 복수 즉 여러개를 뜻하는 Routes로 네이밍이 변경되었다. 개인적으로 Switch라는 네이밍은 좀 헷갈렸던 것 같다.

StaticRouter의 import 위치 변경

아래와 같이 StaticRouter의 import 패키지 경로가 변경되었다.

import { StaticRouter } from "react-router-dom"; // v5
import { StaticRouter } from "react-router-dom/server"; // v6

exact 옵션 삭제

기존에는 루트 페이지("/") 같은 경우 모든 페이지들이 다 불려오는 현상이 있어 exact를 작성해줘야 하는 상황이 있었지만 v6부터는 exact 옵션이 삭제되고 알아서 매칭되는 컴포넌트를 보여주는 방식으로 바뀌었다.
또한, 하위경로에 여러 라우팅을 매칭시키고 싶다면 url 뒤에 *를 사용하여 일치시킬 수 있다.

<Route path="Home/*" />

Route에서 컴포넌트 렌더링 방식

Route에서 컴포넌트를 렌더링 하기 위해서 사용했던 component, render 속성의 네이밍이 element로 바뀌었다. 예시는 아래와 같다.

// v5
<Route path="/home" component={Home} />

// v6
<Route path="/home" element={<Home />}>