[Next.js] URLSearchParams를 활용해 search parameter를 수정하는 방법

const searchParams = useSearchParams()
const params = new URLSearchParams(searchParams.toString())

궁금했다. 왜 searchParams를 문자열로 변환해 다시 URLSearchParams()에 넣는지.

그냥 searchParams를 바로 사용하면 안 되나 싶었다.

하지만 URLSearchParams를 생성한 이유는 따로 있었다.

바로 Next.js의 useSearchParams 반환값은 read-only인 URLSearchParams 이기 때문이다.

Next.js의 useSearchParams()

useSearchParams()에 관한 Next.js 공식 문서: https://nextjs.org/docs/app/api-reference/functions/use-search-params

사진에서 보이는 것처럼 useSearchParams의 반환값은 read-only 버전의 URLSearchParams라고 한다.

실제로 console.log에 useSearchParams 반환값과 URLSearchParams로 생성한 값을 순서대로 찍으면 다음과 같이 표시된다.

결국 searchParams의 값을 변경해서 사용하려면 다른 방법을 찾아야한다는 뜻이다.

URLSearchParams 생성자

값을 변경해서 사용하는 방법 중 하나는 URLSearchParams 생성자에 기존 searchParams를 전달해 사용하는 것이다.

URLSearchParams의 생성자를 활용하는 방법은 MDN 공식문서에 다음과 같이 나와있다.

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams/URLSearchParams

이 중 두 번째 방법인 문자열 리터럴을 전달하는 방법을 통해 기존 Next.js의 read-only인 searchParams 값을 변경 가능한 값으로 변환하여 사용할 수 있다.

코드를 다시 살펴보자.

const searchParams = useSearchParams()
console.log(searchParams.toString()) // 'foo=1&bar=2'
const params = new URLSearchParams(searchParams.toString())

searchParams의 toString() 메서드는 search parameter 값을 ?를 제외한 문자열 형태로 반환한다.

이 값을 URLSearchParams의 초깃값으로 전달해주면 같은 URLSearchParams지만 값이 변경 가능한 객체가 생성된다.

다음은 useSearchParams()에 관한 Next.js 공식 문서 활용 예제이다.

이를 통해 공식 문서에서도 searchParams를 변경하는 방법으로 URLSearchParams 객체를 재생성하는 방법을 사용하고 있는 걸 알 수 있다.