[React] useSearchParams vs useParams
오늘은 React hook 함수 중에서 헷갈리는 useSearchParams와 useParams를 정리해보고자 한다.
우선 미리 정리해두면 좋을 개념이 있는데, Path Parameter와 Query Parameter이다.
Path Parameter
- ex> https://www.sample.co.kr/:country 에서 country에 해당하는 부분
- 유일값 식별할때 사용
- GET, POST, PATCH, DELETE에서 사용할 수 있다
- resource는 같지만, 데이터가 다를때 restful하게 api구성 가능
- react에서 useParams으로 사용
Query Parameter
- ex> https://www.sample.co.kr?id=1 에서 id에 해당하는 부분
- 옵션줄때 사용
- 필터링, 정렬, 페이지네이션, 검색 등
- GET, DELETE에서 사용할 수 있다
- react에서 useSearchParams으로 사용
useParams 사용법
//index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
// App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Route, Routes } from "react-router-dom";
import Test from "./Test";
function App() {
return (
<>
<Routes>
<Route path="/:country" element={<Test />} />
</Routes>
</>
);
}
export default App;
//Test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useParams } from "react-router-dom";
function Test() {
const { country } = useParams();
return (
<>
<div>parameter 값은 {country}입니다.</div>
</>
);
}
export default Test;
useSearchParams 사용법
// App.js
1
2
3
4
5
6
7
8
9
10
import { useSearchParams } from "react-router-dom";
function App() {
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get("id");
return <div>query값은 {id}입니다.</div>;
}
export default App;
참고
This post is licensed under CC BY 4.0 by the author.