[React] useSearchParams 과 useParams 초간단 사용법

초 간단 요약

• useSearchParams - Query String에 사용
  ex) localhost:8080/users?id=123
  

import { useSearchParams } from "react-router-dom";

const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id');
//... 사용

• useParams - Path Variable에 사용
  ex) localhost:8080/users/123

import { useParams } from "react-router-dom";

//...
<BrowserRouter>
  	<Routes>
  		<Route path="/users/:id" element={/*Component*/}></Route>
	</Routes>
</BrowserRouter>
//...
const {id} = useParams(); // 변수명이 path에 작성한것과 일치해야함
//...

추가로 여러 개의 Path Variable도 받을 수 있다.

import { useParams } from "react-router-dom";

//...
<BrowserRouter>
	<Routes>
 		<Route path="/users/:id/:id2" element={/*Component*/}></Route>
	</Routes>
</BrowserRouter>
//...
const {id, id2} = useParams();
//...