개요
프로젝트를 진행하면서 query Parameter를 바꾸어 주는 로직이 필요하였다. react-router-dom의 useLocation을 사용해 location.search을 split하여 값을 가져올 수도 있지만 search를 업데이트 한다고 생각하니 너무 복잡해 질 것 같아서 다른 방법을 찾아보았다.
URLSearchParams
HTML5에서 주소, 특히 쿼리 스트링을 간단하게 처리할 수 있도록 도와주는 API로써 아래와 같은 method들이 존재
const searchParams = new URLSearchParams ();
1) searchParams.get( key ) : search에서 key에 해당하는 value를 반환
2) searchParams.getAll(key): search에서 key에 해당하는 value를 모두 담은 배열을 반환
3) searchParams.set(key, value): search에서 key의 값을 value로 바꾸어준다.
4) searchParams.append(key, value): search에 key=value쌍을 추가하는 메소드로 같은 Key에 대해 여러 개의 value가 들어갈 수 있음
5) searchParams.delete(key): search에서 key값들을 모두 삭제
6) searchParams.toString(): search를 합쳐서 1개의 string으로 반환
7) searchParams.entries(): search에 대한 Iterator를 반환하며 각 값은 queryString에 대한 [key, value] 쌍을 반환한다.
useSearchParams
react-router-dom에서 제공되는 URLSearchParams에 대한 정보를 반환하는 hook으로 [searchParams, setSearchParams]를 반환한다.
searchParams는 현재 search에 대한 정보를 반환하며 setSearchParams()로 새로운 location.search / 쿼리 스트링을 업데이트 한다.
multiple query params
query string에서 1개의 키값에 대해 여러개의 value가 들어가는 경우가 있을 수 있다. 그 경우 key1=value1&key1=value2... 등으로 처리가 되는데 searchParams.set()으로 처리하는 경우 1개만 들어간다..
1) searchParams.getAll("key")로 해당 key에 대해 모든 value값을 배열로 받아올 수 있다.
2) searchParams.append("key", 'newValue')로 set대신에 해당 key에 배열처럼 value가 겊어씌워 지지 않고 추가된다.
3) delete("key")를 쓰는 경우 key1에 대한 모든 value들이 제거 되므로 주의한다.
QueryString이 전역 상태관리 처럼 사용하는 방식으로도 사용!
Reference
https://ui.dev/react-router-query-strings/
https://stackoverflow.com/questions/44250178/remove-one-of-url-query-strings-which-passed-to-url-as-array
https://stackoverflow.com/questions/38797509/passing-array-into-urlsearchparams-while-consuming-http-call-for-get-request
