React-router-dom v6 바뀐점 정리하기

React-router-dom 이 v6로 업그레이드되면서 사용법들이 많이 바뀌었다.
매번 찾기도 그래서 기존에 많이 사용하던 것들이 어떻게 바뀌었는지 정리해보도록 하겠다.

바뀐 모든 기능을 정리하기보다는 기존에 자주 사용하던 기능들만 어떻게 바뀌었는지 정리해보겠다!

---

App에서 중첩 라우팅 설정

Switch, exact가 삭제되었다!

라우터가 중첩될 때 썼던 Switch, exact가 삭제되고
이제는 중복되는 경로의 태그에 /*를 입력하고 자식태그로 넣어준 뒤에 부모태그의 컴포넌트에 Outlet을 넣어준다.

// 기존 App
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/users" component={Users} />
        <Route path="/users:id" component={User} />
        <Route path="/articles" component={Articles} />
      </Switch>
    </BrowserRouter>
    );
}

// V6 App
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/*" element={<Users />} >
          <Route path=":id" element={<User />} />
        </Route>
        <Route path="articles" element={<Articles />} />
      </Routes>
    </BrowserRouter>
  );
}

// V6 중첩되는 경로의 부모컴포넌트 Users
import { Link, Routes, Route, Outlet } from "react-router-dom";

function Users() {
     return (
        <div>
          ...

          <Outlet/>
          </div>
    ) 
}

URL 파라미터와 쿼리스트링 값 추출하기

URL parameter: 그대로 useParams 함수 사용
Query string: 이제는 useSearchParams 함수 사용 👍

바뀐점 중에 매우 편리해 진 점이 쿼리스트링을 쉽게 추출할 수 있는 useSearchParams가 추가되었다는 것이다.
기존에는 아래처럼 UseLocation을 사용한 뒤에 여러 가공을 거쳐야했다.

// 기존의 쿼리스트링 추출

import { useParams } from "react-router";

const User = () => {
  const location = useLocation();
  console.log(location.search)

  ...
};

현재주소가 http://localhost:3000/user?id=soon&key=22 이라면 콘솔에는 ?id=soon&key=22 이 찍히게 되었다.
따라서 추가 라이브러리를 통해 가공하여 사용하곤 했다.
그러나 이제는 다음과같이 사용할 수 있게되었다.

// v6 쿼리스트링 추출

import { useSearchParams } from 'react-router-dom';

const User = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id');
  const key = searchParams.get('key');

}

useSearchParams함수가 반환하는 첫번째인자로 위처럼 쿼리스트링값을 쉽게 조회할 수 있다.
두번째 인자인 set함수로 쿼리스트링을 아래처럼 업데이트할 수 있다.

setSearchParams({ id: 5 , key }); // id 쿼리스트링 업데이트
setSearchParams({ id , key: 2323 }); // key 쿼리스트링 업데이트

---

useHistory byebye

useHistory가 삭제되었다!

아마 가장 많이 사용했던 API가 아니었을까 useHistory..
이제는 useNavigate로 바뀌었다. useHistory의 기능들은 아래처럼 대체하여 사용할 수 있게되었다.

//기존 useHistory

import { useHistory } from "react-router-dom";

function App(){
  const history = useHistory();
  //기능들
  history.push('/주소')
  history.push({pathname: '/주소', state:'값')} // state 전달
  history.replace('/주소') //replace
  history.go(-2) // 뒤뒤로
  history.goBack() //뒤로
  history.goForward() //앞으로

}

//v6 useNavigate

import { useNavigate } from "react-router-dom";

function App(){
  const navigate = useNavigate();
  //기능들
  navigate('/주소') // push
  navigate('/주소', {state:'값'}) // state 전달
  navigate('/주소', {replace: true}) //replace
  navigate(-2) // 뒤뒤로
  navigate(-1) //뒤로
  navigate(1) //앞으로

}

🙏 Reference

• 리액트 라우터 v6 튜토리얼
• [React] react-router-dom v6 업그레이드 되면서 달라진 것들