추가 Hook 살펴보기
useParams Hook으로 URL 파라미터 구현하기
useParams는 현재 URL에서 Route 컴포넌트의 path prop의 값과 일치하는 키(key)와 값(value)의 쌍으로 이루어진 객체를 반환하며, 이를 활용하여 주소의 경로를 정의할 때 동적인 값을 사용할 수 있습니다. 이때 하위 경로는 상위 경로에서 모든 매개변수를 상속 받으며, 주로 ID나 이름을 사용하여 특정 데이터를 연결할 때 사용합니다.
다음 예제는 params를 통해 숫자로 된 newsId를 넘겨받아 해당 숫자를 페이지 주소로 사용하는 예제입니다.
우선 NewsData 컴포넌트를 생성하고 다음과 같이 코드를 작성합니다.
NewsData.js
import { useParams } from "react-router-dom"; const data = { 1: { publisher: "△△일보", title: "React! 풀스택을 꿈꾸며!" }, 2: { publisher: "☆☆뉴스", title: "바닐라 Javascript의 반란!" } }; const NewsData = () => { const params = useParams(); const newsData = data[params.newsId]; return ( <div> <h2>React News</h2> {newsData ? ( <div> <h2>{newsData.publisher}</h2> <p>{newsData.title}</p> </div> ) : ( <p>존재하지 않는 뉴스입니다.</p> )} </div> ); }; export default NewsData;
News.js
import { Link } from "react-router-dom";
const News = () => {
return (
<div>
<h2>React News</h2>
<p>React에 대한 News를 모아놓은 페이지입니다.</p>
<ol>
<li>
<Link to="1">△△일보</Link>
</li>
<li>
<Link to="2">☆☆뉴스</Link>
</li>
</ol>
</div>
);
};
export default News;
params의 이름은 Route 컴포넌트의 path prop을 통해 설정할 수 있으며, 이때 콜론(:)을 사용하여 경로를 표시합니다.
예제(App.js)
// ...
import NewsData from "./components/NewsData";
// ...
const App = () => {
return (
<div>
<h1>React Router</h1>
<Routes>
<Route path="/" element={<Menu />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="news" element={<News />} />
<Route path="news/:newsId" element={<NewsData />} />
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>
</div>
);
};
// ...
위의 예제에서 News 메뉴를 클릭하고, 페이지에 표시된 뉴스를 선택해 봅시다. 웹 브라우저 주소창에서 해당 페이지의 URL 주소를 확인해 보면, 가장 마지막에 우리가 설정한 숫자가 URL 파라미터로 사용되고 있음을 확인할 수 있습니다.
useSearchParams Hook으로 쿼리스트링 구현하기
쿼리스트링(query string)이란 URL 주소 뒤에 사용자의 입력 데이터를 함께 전달하는 가장 단순한 데이터 전달 방법 중 하나입니다.
쿼리스트링은 URL 주소 뒤에 물음표(?)를 시작으로 key=value의 형태로 파라미터를 전달하게 됩니다. 여러 개의 파라미터를 동시에 전달할 때는 & 문자로 연결하여 한 번에 전달할 수 있습니다.
쿼리스트링 문법
URL?key=value[&key=value];
이를 활용하면 검색 키워드를 전달하거나 정렬 방식을 변경하는 등 데이터를 조회할 때 필요한 옵션을 손쉽게 전달할 수 있습니다.
React에서는 useSearchParams Hook을 사용하여 이러한 쿼리스트링을 손쉽게 파싱하여 사용할 수 있습니다. useSearchParams는 useState와 같이 현재 경로에 대한 검색 파라미터와 이를 업데이트할 수 있는 함수를 배열 형태로 동시에 반환합니다.
다음 예제는 사용자로부터 검색할 뉴스의 ID를 입력받아 해당 데이터를 쿼리스트링으로 생성해 보는 예제입니다.
Search.js
import { createSearchParams, useSearchParams } from "react-router-dom";
const Search = () => {
const [searchParams, setSearchParams] = useSearchParams();
return (
<input
value={searchParams.newsId}
onChange={(e) => {
setSearchParams(createSearchParams({ newsId: e.target.value }));
}}
placeholder="검색할 뉴스 ID를 입력하세요."
/>
);
};
export default Search;
예제(App.js)
import { Link, Outlet } from "react-router-dom";
import Search from "./Search";
const Menu = () => {
return (
<div>
<nav>
// ...
</nav>
뉴스 검색 : <Search />
<hr />
<Outlet />
</div>
);
};
export default Menu;
위의 예제에서 사용자 입력 필드에 다양한 숫자나 텍스트를 입력해 보면서, 이에 따라 주소창의 URL 주소가 어떻게 변하는지 살펴보도록 합시다.
