React를 사용하여 동물 웹 애플리케이션을 만들며 페이지별로 라우팅을 설정하는 과정에 대해 이야기해 보려고 합니다. 이 글에서는 React Router를 사용하여 페이지 전환을 쉽게 구현하는 방법, 데이터 파일을 활용해 정보를 렌더링하는 방법, 검색 및 필터 기능을 포함한 다양한 기능들을 설명하겠습니다. 이 프로젝트를 통해 React Router를 활용한 상태 관리와 UI 구성에 대해 이해할 수 있게 될 것입니다.
1. React Router를 사용한 페이지 별 라우팅 과정
React Router는 단일 페이지 애플리케이션(SPA)에서 여러 경로를 다루기 위한 라이브러리입니다. 이 프로젝트에서는 BrowserRouter, Routes, Route, Link 등의 요소를 사용해 페이지를 전환하고, 각 동물의 상세 정보와 검색 결과를 제공합니다.
-
BrowserRouter: 애플리케이션 전체를 감싸는 라우터로, 경로를 관리합니다. 모든 라우팅 컴포넌트는 이 안에 포함되어야 합니다.
-
Routes와 Route: 각 페이지에 대해 경로를 정의합니다. 이 프로젝트에서는 /, /detail/:id, /search의 세 가지 경로를 설정했습니다.
-
Link: 특정 페이지로 이동할 수 있도록 도와주는 컴포넌트입니다. 예를 들어, 메인 페이지에서 각 동물 카드 클릭 시 상세 페이지로 이동하도록 Link를 사용했습니다.
<Routes>
<Route path='/' element={<Main/>}></Route>
<Route path='/detail/:id' element={<Detail/>}></Route>
<Route path='/search' element={<Search/>}></Route>
</Routes>이와 같은 코드로 각 경로를 설정해 페이지 별로 라우팅을 쉽게 구현할 수 있습니다.
2. 데이터 파일 내 데이터를 메인 페이지에 렌더링하는 방법
데이터는 data.js 파일에서 가져오며, 이 데이터를 메인 페이지에 렌더링하여 각 동물 카드를 화면에 보여줍니다.
import { data } from "../assets/data/data.js";
function Main() {
return (
<ul>
{data.map(el =>
<li key={el.id}>
<Link to={`/detail/${el.id}`}>
<img src={el.img} alt={el.name}/>
<div>{el.name}</div>
</Link>
</li>)}
</ul>
)
}위 코드에서는 data.js 파일에서 가져온 데이터를 map() 함수를 사용하여 각 동물 정보를 리스트 형태로 렌더링했습니다.
3. 동물 카드 클릭 시 상세 페이지로 경로 이동 설정
메인 페이지에서 특정 동물 카드를 클릭하면, 동물의 상세 정보 페이지로 이동합니다. 각 동물의 id 값을 URL에 포함시켜 그에 해당하는 데이터를 불러오는 방식입니다.
<Link to={`/detail/${el.id}`}>
<img src={el.img} alt={el.name}/>
<div>{el.name}</div>
</Link>이처럼 Link 컴포넌트를 사용하여 각 동물의 id 값을 포함하는 경로로 이동할 수 있습니다.
4. 상세 페이지로 이동 시 특정 id값에 대한 데이터 받아오는 방법 (useParams)
상세 페이지에서는 URL의 id 값을 이용해 특정 동물의 데이터를 가져옵니다. 이를 위해 useParams 훅을 사용합니다.
import { useParams } from "react-router-dom";
import { data } from "../assets/data/data.js";
function Detail() {
const params = useParams();
const animalData = data.find((el) => el.id === Number(params.id));
return (
<section className="detail">
<img src={animalData.img} alt=""/>
<h2>{animalData.name}</h2>
<div>{animalData.description}</div>
</section>
)
}useParams를 사용하여 현재 URL에서 id 값을 추출하고, 해당 id와 일치하는 데이터를 find() 함수로 찾아 상세 정보를 렌더링합니다.
5. useSearchParams를 사용하여 경로의 특정 값에 대한 데이터를 받아오는 방법
검색 페이지에서는 URL의 쿼리 파라미터를 활용해 검색어에 해당하는 데이터를 필터링합니다. 이를 위해 useSearchParams를 사용합니다.
import { useSearchParams } from "react-router-dom";
import { data } from "../assets/data/data.js";
function Search() {
const [searchParams] = useSearchParams();
const params = searchParams.get("animal");
const reg = getRegExp(params);
const filterData = data.filter(el => el.name.match(reg));
return (
<ul>
{filterData.map(el =>
<li key={el.id}>
<Link to={`/detail/${el.id}`}>
<img src={el.img} alt={el.name}/>
<div>{el.name}</div>
</Link>
</li>)}
</ul>
)
}useSearchParams로 URL에서 animal이라는 쿼리 파라미터를 가져와 데이터를 필터링하여 렌더링합니다.
6. useNavigate를 사용하여 경로를 이동하는 방법
useNavigate 훅을 사용하면 함수 호출로 쉽게 경로를 이동할 수 있습니다. 이 프로젝트에서는 검색어 입력 후 버튼을 클릭하면 검색 결과 페이지로 이동하도록 설정했습니다.
import { useNavigate } from "react-router-dom";
function App() {
const [inputValue, setInputValue] = useState("");
const navigate = useNavigate();
return (
<header>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button
onClick={() => navigate(`/search?animal=${inputValue}`)}
>
검색
</button>
</header>
);
}useNavigate를 이용해 검색어를 포함한 경로로 이동함으로써 검색 결과 페이지를 보여줍니다.
7. korean-regexp 라이브러리 개념 설명
korean-regexp는 한글을 검색할 때 자음과 모음만으로도 검색할 수 있게 도와주는 라이브러리입니다. 예를 들어 '강아지'를 검색할 때 'ㄱㅇㅈ'만 입력해도 검색 결과를 찾을 수 있도록 도와줍니다. 이 프로젝트에서는 검색 기능의 편의성을 높이기 위해 getRegExp() 함수를 사용했습니다.
8. 전체 데이터 목록에서 검색어로 필터링 된 데이터를 받아오는 방법
검색 페이지에서는 검색어를 이용해 데이터 목록을 필터링하고, 필터링된 결과만 보여줍니다. filter() 메서드를 사용해 data 배열에서 검색어와 일치하는 항목만 반환합니다.
const filterData = data.filter(el => el.name.match(reg));korean-regexp 라이브러리의 정규 표현식을 활용해 검색어가 포함된 동물들을 필터링하여 결과를 렌더링합니다.
이번 포스트에서는 React Router와 함께 여러 페이지를 라우팅하고, 데이터 파일을 활용해 다양한 기능을 구현하는 방법을 살펴보았습니다.
