React Router v6 자주 쓰는 훅(hook) 정리

React Router는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. v6로 업그레이드 되면서 React Hooks 를 기반으로 한 React Router Hooks 들이 추가되었다. 쿼리스트링 파서(parser)를 따로 설치하지 않아도 될 정도로 편리한 기능들이 있어서 정리해보려고 한다.

기본 설치

$ npx creat-react-app react-router-practice
$ npm i react-router-dom

프로젝트에 라우터 적용

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

이제 BrowserRouter로 감싸진 children 안에서 React Router 를 사용할 준비가 되었다.

v5에서 v6로 업그레이드 되면서 가장 큰 차이점은 Switch 대신 Routes를 사용한다는 점이다. React Router의 공식문서에서는 Switch 대신 Routes를 쓰는 것이 버그를 줄여주고 더 예측 가능한 라우팅을 가능하게 한다고 설명한다.

// v5의 라우팅 형식
import {
  BrowserRouter,
  Switch,
  Route,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

// v6의 라우팅 형식
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
        <Route path="*" element={<Navigate replace to="/" />} />
      </Routes>
    </BrowserRouter>
  );
}

useLocation

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

export default function Example() {
  const { pathname, search, state } = useLocation();
  const [title, setTitle] = useState();

  useEffect(() => {
    if(pathname === '') {
      setTitle('This is Home');
    } else if (pathname === 'info') {
      setTitle('This is Info page');
    } else {
      setTitle('This is empty page');
    }
  }, [pathname]);

  return (
    <h1>{title}</h1>
  )
}

useLocation 훅은 location 객체를 반환하는 훅으로 pathname, search, state 등에 접근할 수 있다. 보통 pathname에 따라 상태값을 변경하고 싶을 때 많이 사용한다.

useNavigate

import { createSearchParams, useNavigate } from 'react-router-dom';

export default function Example() {
  const navigate = useNavigate();

  return (
    <>
      <button
        onClick={() => navigate('/')}
      >Go to Home</button>
      <button
        onClick={() => navigate({
          pathname: '/article',
          search: createSearchParams({
            category: 'javascript',
            currentPage: 1
          }).toString(),
        })}
      >Go to Article</button>
    </>
  )
}

useNavigate 훅은 라우팅 기능을 가지고 있는 함수를 리턴하는 훅으로 페이지 이동을 할 때 사용한다. pathname을 파라미터 값으로 바로 넣어주거나 객체에 값을 할당해 넣어줄 수 있다. createSearchParams와 함께 사용하면 쿼리 스트링(search) 값을 넣어주면서 페이지 이동을 할 수 있다.

useParams

useParams는 URL 파라미터 값을 리턴하는 훅으로 자세한 내용은 이전 게시물을 참고하길 바란다.

useParams 로 세부 페이지 라우팅 구현하기

useSearchParams

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

function Example() {
  const [searchParams, setSearchParams] = useSearchParams();
  const categoryParam = searchParams.get('category');
  const currentPageParam = searchParams.get('currentPage');

  useEffect(() => fakeDataFetch({category: categoryParam, page: currentPageParam}), [categoryParam, currentPageParam]);

  const handlePageClick = (pageNum) => {
    setSearchParams({category: categoryParam, currentPage: pageNum});
  }

  return (
    <Pagination onClick={handlePageClick} />
  )
}

useSearchParams는 쿼리스트링에 접근할 수 있게 해주는 훅이다. useState처럼 배열에서 구조분해할당으로 꺼내 쓸 수 있다. 앞에 선언된 searchParams가 getter 이고, setSearchParams가 setter 다.

참고

React Router v6 튜토리얼

Home v6.4.2