Parameter and QueryString
파라미터: /profiles/velopert
쿼리: /about?details=true파라미터는 특정 id나 이름을 가지고 조회를 할 때 사용하고,
쿼리는 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용한다.
1. UseParams
- URL로부터 파라미터를 가져오는 hook
- path props로 전달해준 파라미터 이름은 :을 사용하여 표시해준다.
import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// Get the userId param from the URL.
let { userId } = useParams();
// ...
return (
<div>{userId}의 프로필</div>
);
}
function App() {
return (
<Routes>
<Route path="users">
<Route path=":userId" element={<ProfilePage />} />
<Route path="me" element={...} />
</Route>
</Routes>
);
}2.useSearchParams
- 쿼리를 이용해서 필터링을 해줄 때 사용된다.
- 검색매개변수와 이를 변경해주는 함수라는 두 값의 배열을 리턴한다.
- 변경함수인 setSearchParams는 URL의 쿼리를 변경시킨다.
// 숙소 목록 페이지
import React from 'react';
import { useSearchParams } from 'react-router-dom';
function List() {
const [searchParams, setSearchParams] = useSearchParams();
const showSelfCheckIn = searchParams.get('filter') === 'selfCheckIn';
return (
<>
<button onClick={() => setSearchParams({ filter: 'selfCheckIn' })}>
셀프체크인 숙소만 필터링하기
// url의 쿼리부분이 url/list -> url/list?filter=selfCheckIn 으로 변경
</button>
{showSelfCheckIn ? (
<div>셀프체크인 숙소 목록!!!</div>
) : (
<div>전체 숙소 목록!!</div>
)}
</>
);
}
export default List;
Zoë Park