<div id="readability-page-1" class="page"><article id="post-react/2024/01/31/[React다루는기술] 15.React useParams, useSearchParams" role="article"><header> <time datetime="2024-01-31T00:00:00+00:00">31 Jan 2024</time> in <a href="/category/react/" data-flip="title">React</a> on <a href="/tag/react-dealwith/" data-flip="title">React 다루는 기술</a></header><div>리액트에서 화면 라우팅간에 파라미터와 쿼리스트링을 useParams와 useSearchParams Hook 을 설명하는 포스팅이다.<h2 id="1-useparams">1. useParams</h2><code>useParams</code>는 react-router-dom 라이브러리에서 제공되는 React Hook 하나로, React Router의 동적 라우팅에서 URL 매개변수를 가져오는 데 사용됩니다.React Router를 사용하면 동적으로 변경되는 URL에 대응하여 특정 컴포넌트를 렌더링할 수 있습니다. 이때 URL의 일부로 전달되는 매개변수를 가져오기 위해 useParams 훅을 사용한다.아래와 같이 쿼리스트링 방식이 아닌 rest-api 형태(?)의 uri로 params를 받는다.<blockquote>App.js</blockquote><div><pre><code> return (
 &lt;div style={wrapper}&gt;
 &lt;Routes&gt;
 &lt;Route path="/" element={&lt;List /&gt;} /&gt;
 &lt;Route path="/detail/:id" element={&lt;Detail /&gt;} /&gt;
 &lt;/Routes&gt;
 &lt;/div&gt;
 );
</code></pre></div><blockquote>List.js</blockquote><div><pre><code>import { Link } from "react-router-dom";

const devHistorys = [
 {
 id: 1,
 title: "신한은행 차세대 프로젝트",
 year: "2021~2022",
 },
 {
 id: 2,
 title: "저축은행 차세대 프로젝트",
 year: "2023~2023",
 },
 {
 id: 3,
 title: "IBK 프로젝트",
 year: "2024~2024",
 },
 {
 id: 4,
 title: "XX증권 차세대 프로젝트",
 year: "2025~2025",
 },
];

const List = () =&gt; {
 return (
 &lt;div&gt;
 &lt;h1&gt;목록&lt;/h1&gt;
 &lt;p&gt;목록 페이지입니다.&lt;/p&gt;
 &lt;ul&gt;
 {devHistorys.map((devItem, index) =&gt; (
 &lt;li&gt;
 &lt;Link to={`/detail/${devItem.id}`}&gt;
 [{devItem.id}] {devItem.title}
 &lt;/Link&gt;
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 &lt;/div&gt;
 );
};

export default List;
</code></pre></div><blockquote>Detail.js</blockquote><div><pre><code>import { useState } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";

const selectDBdevHistorys = [
 {
 id: 1,
 title: "신한은행 차세대 프로젝트",
 year: "2021~2022",
 },
 {
 id: 2,
 title: "저축은행 차세대 프로젝트",
 year: "2023~2023",
 },
 {
 id: 3,
 title: "IBK 프로젝트",
 year: "2024~2024",
 },
 {
 id: 4,
 title: "XX증권 차세대 프로젝트",
 year: "2025~2025",
 },
];

const Detail = () =&gt; {
 const params = useParams();

 let id = parseInt(params.id, 0);

 //let devHistory = selectDBdevHistorys.filter((item) =&gt; item.id === id)[0];
 let devHistory = selectDBdevHistorys.find((item) =&gt; item.id === id);
 // setDevItem(devHistory);

 return (
 &lt;div&gt;
 &lt;h1&gt;프로젝트 정보&lt;/h1&gt;
 &lt;p&gt;프로젝트명 : {devHistory.title}&lt;/p&gt;
 &lt;p&gt;개발 기간 : {devHistory.year}&lt;/p&gt;
 &lt;br /&gt;
 &lt;Link to="/List"&gt;목록으로&lt;/Link&gt;
 &lt;/div&gt;
 );
};

export default Detail;
</code></pre></div><blockquote>Detail.js (useState 사용)</blockquote>useState Hook을 사용하기 위해 useEffect Hook과 같이 사용한 예제이다.<div><pre><code>import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";

const selectDBdevHistorys = [
 {
 id: 1,
 title: "신한은행 차세대 프로젝트",
 year: "2021~2022",
 },
 {
 id: 2,
 title: "저축은행 차세대 프로젝트",
 year: "2023~2023",
 },
 {
 id: 3,
 title: "IBK 프로젝트",
 year: "2024~2024",
 },
 {
 id: 4,
 title: "XX증권 차세대 프로젝트",
 year: "2025~2025",
 },
];

const Detail = () =&gt; {
 const params = useParams();
 const [devItem, setDevItem] = useState(null);

 let id = parseInt(params.id, 0);

 useEffect(() =&gt; {
 let foundDevHistory = selectDBdevHistorys.find((item) =&gt; item.id === id);
 setDevItem(foundDevHistory);
 }, [id]);///id가 변경 될때만 effect 리렌더링

 return (
 &lt;div&gt;
 &lt;h1&gt;프로젝트 정보&lt;/h1&gt;
 {devItem ? (
 &lt;&gt;
 &lt;p&gt;프로젝트명 : {devItem.title}&lt;/p&gt;
 &lt;p&gt;개발 기간 : {devItem.year}&lt;/p&gt;
 &lt;/&gt;
 ) : (
 &lt;p&gt;프로젝트를 찾을 수 없습니다.&lt;/p&gt;
 )}
 &lt;br /&gt;
 &lt;Link to="/List"&gt;목록으로&lt;/Link&gt;
 &lt;/div&gt;
 );
};

export default Detail;
</code></pre></div>useEffect 훅이 컴포넌트가 마운트되거나 id 매개변수가 변경될 때 프로젝트 세부 정보를 가져와 업데이트하는 데 사용했다.<h2 id="2-usesearchparams">2. useSearchParams</h2>라우트에서 쿼리스트링을 사용하는 방법이다. URL파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 하는 것은 없다.<ul><li><code>useLocation</code> Hook은 react-router-dom 라이브러리에서 제공되는 React 훅 중 하나로, 현재 URL의 정보를 가져오는 데 사용됩니다. 이 훅을 사용하면 컴포넌트에서 현재 URL의 경로, 쿼리 매개변수 및 기타 관련 정보에 액세스할 수 있습니다.</li><li><code>useSearchParams</code> Hook으로 현재 URL의 검색 매개변수를 가져올 수 있다.</li></ul><blockquote>Search.js</blockquote><div><pre><code>import React from "react";
import { Link, useLocation, useSearchParams } from "react-router-dom";

const Search = () =&gt; {
 const location = useLocation();
 const [searchParams, setSearchParams] = useSearchParams();

 let id = searchParams.get("id");
 let title = searchParams.get("title");

 return (
 &lt;div&gt;
 &lt;h1&gt;프로젝트 정보&lt;/h1&gt;
 &lt;p&gt;QueryString : {location.search}&lt;/p&gt;
 &lt;p&gt;param id : {id}&lt;/p&gt;
 &lt;p&gt;param title : {title}&lt;/p&gt;
 &lt;br /&gt;
 &lt;Link to="/List"&gt;목록으로&lt;/Link&gt;
 &lt;/div&gt;
 );
};

export default Search;
</code></pre></div></div></article></div>

linked2ev

리액트에서 화면 라우팅간에 파라미터와 쿼리스트링을 useParams와 useSearchParams Hook 을 설명하는 포스팅이다.
1. useParams
useParams는 react-router-dom 라이브러리에서 제공되는 React Hook 하나로, React Router의 동적 라우팅에서 URL 매개변수를 가져오는 데 사용됩니다.
React Router를 사용하면 동적으로 변경되는 URL에 대응하여 특정 컴포넌트를 렌더링할 수 있습니다. 이때 URL의 일부로 전달되는 매개변수를 가져오기 위해 useParams 훅을 사용한다.
아래와 같이 쿼리스트링 방식이 아닌 rest-api 형태(?)의 uri로 params를 받는다.
'/detail/1'
App.js
 return (
 <div style={wrapper}>
 <Routes>
 <Route path="/" element={<List />} />
 <Route path="/detail/:id" element={<Detail />} />
 </Routes>
 </div>
 );
List.js
import { Link } from "react-router-dom";
const devHistorys = [
 {
 id: 1,
 title: "신한은행 차세대 프로젝트",
 year: "2021~2022",
 },
 {
 id: 2,
 title: "저축은행 차세대 프로젝트",
 year: "2023~2023",
 },
 {
 id: 3,
 title: "IBK 프로젝트",
 year: "2024~2024",
 },
 {
 id: 4,
 title: "XX증권 차세대 프로젝트",
 year: "2025~2025",
 },
];
const List = () => {
 return (
 <div>
 <h1>목록</h1>
 목록 페이지입니다.
 <ul>
 {devHistorys.map((devItem, index) => (
 <li>
 <Link to={`/detail/${devItem.id}`}>
 [{devItem.id}] {devItem.title}
 </Link>
 </li>
 ))}
 </ul>
 </div>
 );
};
export default List;
Detail.js
import { useState } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
const selectDBdevHistorys = [
 {
 id: 1,
 title: "신한은행 차세대 프로젝트",
 year: "2021~2022",
 },
 {
 id: 2,
 title: "저축은행 차세대 프로젝트",
 year: "2023~2023",
 },
 {
 id: 3,
 title: "IBK 프로젝트",
 year: "2024~2024",
 },
 {
 id: 4,
 title: "XX증권 차세대 프로젝트",
 year: "2025~2025",
 },
];
const Detail = () => {
 const params = useParams();
 let id = parseInt(params.id, 0);
 //let devHistory = selectDBdevHistorys.filter((item) => item.id === id)[0];
 let devHistory = selectDBdevHistorys.find((item) => item.id === id);
 // setDevItem(devHistory);
 return (
 <div>
 <h1>프로젝트 정보</h1>
 프로젝트명 : {devHistory.title}
 개발 기간 : {devHistory.year}
 
 <Link to="/List">목록으로</Link>
 </div>
 );
};
export default Detail;
Detail.js (useState 사용)
useState Hook을 사용하기 위해 useEffect Hook과 같이 사용한 예제이다.
import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
const selectDBdevHistorys = [
 {
 id: 1,
 title: "신한은행 차세대 프로젝트",
 year: "2021~2022",
 },
 {
 id: 2,
 title: "저축은행 차세대 프로젝트",
 year: "2023~2023",
 },
 {
 id: 3,
 title: "IBK 프로젝트",
 year: "2024~2024",
 },
 {
 id: 4,
 title: "XX증권 차세대 프로젝트",
 year: "2025~2025",
 },
];
const Detail = () => {
 const params = useParams();
 const [devItem, setDevItem] = useState(null);
 let id = parseInt(params.id, 0);
 useEffect(() => {
 let foundDevHistory = selectDBdevHistorys.find((item) => item.id === id);
 setDevItem(foundDevHistory);
 }, [id]);///id가 변경 될때만 effect 리렌더링
 return (
 <div>
 <h1>프로젝트 정보</h1>
 {devItem ? (
 <>
 프로젝트명 : {devItem.title}
 개발 기간 : {devItem.year}
 </>
 ) : (
 프로젝트를 찾을 수 없습니다.
 )}
 
 <Link to="/List">목록으로</Link>
 </div>
 );
};
export default Detail;
useEffect 훅이 컴포넌트가 마운트되거나 id 매개변수가 변경될 때 프로젝트 세부 정보를 가져와 업데이트하는 데 사용했다.
2. useSearchParams
라우트에서 쿼리스트링을 사용하는 방법이다. URL파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 하는 것은 없다.
useLocation Hook은 react-router-dom 라이브러리에서 제공되는 React 훅 중 하나로, 현재 URL의 정보를 가져오는 데 사용됩니다. 이 훅을 사용하면 컴포넌트에서 현재 URL의 경로, 쿼리 매개변수 및 기타 관련 정보에 액세스할 수 있습니다.
useSearchParams Hook으로 현재 URL의 검색 매개변수를 가져올 수 있다.
Search.js
import React from "react";
import { Link, useLocation, useSearchParams } from "react-router-dom";
const Search = () => {
 const location = useLocation();
 const [searchParams, setSearchParams] = useSearchParams();
 let id = searchParams.get("id");
 let title = searchParams.get("title");
 return (
 <div>
 <h1>프로젝트 정보</h1>
 QueryString : {location.search}
 param id : {id}
 param title : {title}
 
 <Link to="/List">목록으로</Link>
 </div>
 );
};
export default Search;

[React다루는기술] 15. React 파라미터와 쿼리스트링(useParams, useSearchParams)

댓글