미니 프로젝트로 알아보는 리액트 라우팅

📋 요약

1. 라우터 설정 - React Router의 Declarative 방식으로 간단하게 라우팅 구성
2. 페이지 이동 - useNavigate 훅을 사용한 프로그래밍적 네비게이션
3. URL 데이터 활용 - params와 searchParams를 통한 동적 페이지 구현
4. 한국어 검색 - korean-regexp 라이브러리로 초성 검색 기능 구현

🏆 완성본

완성본 깃헙

🛠️ 기술 설명

React Router 설정 방법

React Router를 설정하는 방법은 크게 세 가지가 있다.
1. Declarative -- 간단함
2. Data -- 라우터에 데이터 관련 명령을 넣을 수 있음
3. Framework -- 여러 기능들이 추가되어 있음

본 프로젝트에서는 가장 간단한 Declarative 방법을 채택하였다.

Declarative 리액트 라우터는 아래 순서로 작동한다.
1. <BrowserRouter>로 감싸진 컴포넌트는 React Router를 사용할 수 있게 된다.
2. <Routes> 태그 안의 내용물은, 현재 url에 해당하는 <Route>와 연결된 컴포넌트가 된다.

<BrowserRouter>
  <Routes>
    {/* 현재 경로가 "/" 이면 <HomePage />를 여기에 불러온다. */}
	<Route path="/" element={<HomePage />} />
    
    {/* 현재 경로가 "/detail" 이면 <DetailPage />를 여기에 불러온다. */}
    <Route path="/detail/" element={<DetailPage />} />
  </Routes>
</BrowserRouter>

본 프로젝트에서의 적용은 이렇다.
1. 모든 곳에 라우터가 적용되게 하기 위해 최상단의 파일인 main.jsx에서 <App />을 <BrowserRouter>로 감싼다.

// main.jsx
createRoot(document.getElementById('root')).render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
)

2. 이후 컴포넌트 중 최상단, 파일로는 main.jsx 다음으로 최상단인 App.jsx는 라우팅만 관리하게 한다.

// App.jsx
const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/detail/:animalId" element={<DetailPage />} />
      </Routes>
    </>
  )
}

이제 url의 경로가 "/"이냐 "/detail/:animalId"이냐에 따라 작성해둔 컴포넌트가 자동으로 불러와진다.

useNavigate로 경로 이동하기

리액트 내에서 경로를 이동할 땐 React Router의 useNavigate를 사용한다. 사용법은 아래와 같다.

import { useNavigate } from "react-router"
const Page = () => {
	const navigate = useNavigate()
    
    const goToHome = () => navigate("/") // 해당 함수 호출 시 "/" 경로로 이동
	return (...)
}

url에서 params, searchParams 받아오기

url은 동적으로 구성할 수 있다. 이 때, 변하는 부분의 역할에 따라 그 부분은 params 혹은 searchParams가 된다. 둘은 아래와 같은 형식적 차이가 있다.

params				:animalId		localhost:3000/detail/:animalId
searchParams		?name=dog		localhost:3000/?name=dog

:으로 시작하는 것이 params
?으로 시작하는 것이 searchParams이다.

params에는 보통 해당 페이지에서 다루고 싶은 정보의 id를 넣는다. 그러면 해당 페이지 컴포넌트는 이를 useParams로 가져온다. 아래와 같은 식이다.

const params = useParams()
const animalIdInString = params.animalId

이때, 해당 파라미터의 이름이 무엇이냐는 <Route>에서 설정한 href를 따른다.

// App.jsx

 <Route path="/detail/:animalId" element={<DetailPage />} /> // 파라미터 이름은 animalId

// DetailPage.jsx
const animalIdInString = params.animalId // 라우트에서 설정된 이름 animalId 사용

searchParams은 필터 조건을 담는 검색용 파라미터이다. params는 /로 구분된 url 한 칸에 하나만 들어갈 수 있지만, searchParams는 &로 연결하여 여러 개를 쓸 수 있다. 기본적 사용법은 아래와 같다.

// HomePage.jsx
// 예시 url:	http://localhost:5173/?name=dog
const [searchParams, setSearchParams] = useSearchParams()
const searchName = searchParams.get("name") ?? "" // searchName <- dog

korean-regexp로 한국어 필터링하기

searchParams로 필터링을 할 대상이 한글이라면 문제가 생긴다. utf-8의 관점에서 한글은 초성, 중성, 종성 조합이 끝난 글자들의 집합이다. 따라서 "ㅇ"라는 글자는 "야호"라는 문자열에 들어있지 않다. 문자열이 보다 한국인이 한글을 생각하듯, 초성 중성 종성 관점에서 검색되게 하고 싶을 땐 korean-regexp를 이용하면 좋다.
npm 페이지에서 해당 내용을 잘 시연하고 있다.

npm korean-regexp README

사용법은 아래와 같다.

import { getRegExp } from 'korean-regexp'

const Page = () => {
  const text = "야호"
  const regExp = getRegExp("ㅇ")
  const result = text.match(regExp) // returns [ '야', index: 0, input: '야호', groups: undefined ]

  return (...)
}

📚 참고

완성본 깃헙
React Router __Picking a Mode
npm korean-regexp README