[React] searchParams 동적 라우팅

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

와! 오늘 진짜 엄청난걸 알아버렸다.

ㅇㅣ제 선택값 유지를 위해서 URL Params 를 이용하려고 하는데

Nextjs 개발을 할때는 router.push({...}) 를 통해서 현재 URL 에 파람만 추가해줬었는데

React 에서 하려고 하니까 좀 .. 햇갈렸다고 해야하나 쉽지않았다.

[ 첫번째방법 : 추천 x ]

const searchParams = new URLSearchParams(location.search);
searchParams.set('newParam', 'value');
navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });

이제 의식의흐름기법으로 작성한 코드인데, 중요한건 히스토리가 쌓여선 안됐다.

그렇기때문에 replace 는 true 로 해주고 search 와 pathname 을 조합해서 만들었다.

문제는 이렇게 하고나니까 가독성도 떨어지고 누가봐도 좀 이상하다.

[ 두번째방법 : 추천 o 강추 ]

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

const [searchParams, setSearchParams] = useSearchParams();

// get
searchParams.get("params")

// set -> value 는 string 값만
searchParams.set("params", "value");
setSearchParams(searchParams, { replace: true });

useSearchParams 를 이용하는 건데. 이게 아주 쉽고 간단하게 사용할 수 있었다.

get 과 set 을 이용하여 값을 세팅할 수 있었고

가독성 또한 뛰어나다고 할 수 있다. 이리 간단하니까 !