📌 React Router를 활용한 동물 정보 웹 페이지 만들기를 통한 개념 정리

이번 프로젝트는 React Router를 사용하여 동물 정보를 보여주는 웹 페이지를 구현해보는 실습이었다.
메인 페이지에서 동물 목록을 보여주고, 클릭하면 상세 정보로 이동하며,
검색 기능까지 구현하면서 라우팅에 필요한 여러 개념을 자연스럽게 익힐 수 있었다.

아래는 내가 만든 코드 예시를 중심으로, 각 개념을 하나씩 정리해본 것이다.

1️⃣ BrowserRouter – 라우팅의 시작

React에서 여러 페이지로 이동하려면 BrowserRouter로 애플리케이션을 감싸야 한다.
나는 main.jsx 파일에서 이처럼 설정했다.

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

 

• BrowserRouter는 프로젝트의 라우팅 기능을 활성화하는 역할을 한다.
• 이 컴포넌트를 App을 감싸는 것으로 라우터가 동작할 준비가 된다.

2️⃣ Routes, Route – 페이지를 나누는 법

App.jsx에서는 페이지별로 어떤 컴포넌트를 보여줄지 Routes와 Route를 사용해 지정했다.

<Routes>
  <Route path='/' element={<Main />} />
  <Route path='/main' element={<Main />} />
  <Route path='/detail/:id' element={<Detail />} />
  <Route path='/search' element={<Search />} />
</Routes>

 

• Route의 path는 URL 주소, element는 그 주소에 보일 컴포넌트이다.
• :id처럼 : 기호가 붙은 것은 동적 파라미터로, 상세 페이지에서 유용하게 쓴다.

3️⃣ Link – 페이지 간 이동하기

메인 페이지(Main.jsx)에서는 Link를 사용하여 상세 페이지로 이동할 수 있게 했다.

<Link to={`/detail/${el.id}`}>
  <img src={el.img} />
</Link>

 

• Link는 a 태그처럼 생겼지만, 페이지를 새로고침하지 않고 이동시켜주는 React Router 전용 컴포넌트이다.
• to 속성에 이동할 경로를 문자열로 적는다.
• 처음엔 공백을 넣어서 /detail/ ${el.id}로 잘못 작성해 페이지가 열리지 않았는데,
  ${el.id} 앞뒤에 공백 없이 작성해야 정상적으로 이동된다.

4️⃣ useParams() – URL 파라미터 값 가져오기

상세 페이지(Detail.jsx)에서는 useParams()를 이용해 URL에 포함된 id 값을 꺼냈다.

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

const params = useParams();
const animal = data.find(el => el.id === Number(params.id));

 

 

• /detail/:id 형태로 라우트를 등록하면, 해당 경로에서 id 값을 받아올 수 있다.
• 숫자형 비교를 위해 params.id를 Number()로 감싸는 것이 포인트다.

5️⃣ useNavigate() – 버튼으로 경로 이동하기

검색창에서 검색 버튼을 눌렀을 때 결과 페이지로 이동하려면 useNavigate()를 사용한다.

const navigate = useNavigate();
<button onClick={() => navigate(`/search?animal=${inputValue}`)}>검색</button>

 

 

• 이 훅은 함수 형태로 사용되며, 문자열 경로를 전달하면 그 경로로 이동한다.
• 처음에는 navigate()를 쓰지 않고 문자열만 반환해서 페이지가 바뀌지 않는 오류를 겪었다.

6️⃣ useSearchParams() – 쿼리스트링 값 가져오기

검색 결과 페이지(Search.jsx)에서는 useSearchParams()를 사용하여 URL 쿼리값을 추출했다.

const [searchParams] = useSearchParams();
const param = searchParams.get("animal");

 

• /search?animal=고양이 같은 경로에서 animal 값을 가져올 수 있다.

7️⃣ korean-regexp – 한글 검색을 부드럽게

검색 기능에서는 단어의 일부만 입력해도 검색되도록 하기 위해
korean-regexp 라이브러리의 getRegExp() 함수를 사용했다.

import { getRegExp } from "korean-regexp";

const reg = getRegExp(param);
const result = data.filter(el => reg.test(el.name));

 

• korean-regexp는 초성, 중성만 입력해도 일치하도록 도와주는 정규식을 생성해준다.
• 덕분에 "ㄱㅇㅇ" 같은 검색어도 "고양이"와 매칭된다.

기능	사용한 훅/컴포넌트	설명
라우터 초기 설정	BrowserRouter	최상단에서 라우팅 활성화
페이지 구분	Routes, Route	경로별로 컴포넌트 지정
페이지 이동	Link, useNavigate	사용자 액션으로 경로 이동
동적 URL 값 사용	useParams	/detail/:id → params.id
쿼리스트링 사용	useSearchParams	/search?animal=고양이 → get('animal')
한글 검색 필터링	getRegExp	초성도 검색 가능하게 함

📝 마무리하며

React Router를 처음 사용할 때는 경로 설정, 파라미터 처리, 쿼리 추출 같은 작업이 꽤 낯설게 느껴졌다.
그러나 작은 오류 하나하나를 직접 해결하면서 전체 흐름을 이해할 수 있었다.

특히,

• 공백이 있는 잘못된 경로
• return 없는 filter
• import 방식 실수
  이런 자잘한 부분들이 실제로는 큰 버그를 만들 수 있다는 것을 몸소 깨달았다.