자바스크립트에서 URLSearchParams 사용하여 주소 쿼리스트링, 파라미터 변경하기

자바스크립트에서 주소 입력창에 입력된 파라미터 값을 다른 값으로 변경하는 방법을 알아봅니다.

# 주소창의 현재 파라미터를 다른 값으로 바꾸기

쉽게 말해 현재 아래와 같은 페이지값의 파라미터를 다른 값으로 바꾸는 방법이라고 생각하시면 됩니다.

위와 같이 페이지를 변경할 때 가장 많이 사용됩니다. 여기서 문제는 파라미터가 page값만 존재하는 경우는 거의 없을 것입니다. 아래처럼 여러개의 값들이 존재하겠죠...

파리미터가 더 많은 경우 간단하게 구현하는 방법이 쉽게 떠오르지 않는데요 이때 사용 가능한 방법이 바로 URLSearchParams를 사용하는 방법입니다.

URLSearchParams

자세한 방법은 아래 링크에서 확인하시기 바랍니다.

관련 링크 바로가기 >
https://webisfree.com/2019-07-26/자바스크립트에서-url-쿼리스트링(query-string)-쉽게-가져오는-방법

여기서는 이를 실제 사용하여 다른 값으로 변경하는 부분만 알아봅니다.

! URLSearchParams를 사용하여 파라미터 변경 예제

간단한 예제를 만들어보는게 가장 빠른 방법이죠. 아래의 함수는 현재 페이지를 다른 페이지로 변경하도록 이동하는 함수입니다. 인자로 원하는 페이지 값을 전달 받습니다.

완성된 함수는 위 코드와 같습니다. 순서대로 설명하자면...

1. URLSearchParams를 사용하여 새로운 인스턴스 URLSearch 를 생성


2. 생성된 인스턴스에 set() 함수를 사용하여 새로운 페이지로 변경

[ 유용한 팁 ]
여기서는 set()을 사용하여 page 값을 변경 또는 업데이트하였습니다. 만약 두 개의 쿼리스트링이 필요한 경우라면 어떻게 할까요? 이 경우에는 append()를 사용합니다. append()는 기존의 쿼리스트링에 추가하며 동일한 키 값이 유지되며 동시에 여러 개의 키 값을 가질 수 있게 됩니다. 쉽게 설명하면 아래와 같이 두 개의 page 키 값 1과 2를 동시에 전달 할 수 있습니다.


3. 변경된 파라미터를 문자열로 가져오기


4. 마지막으로 해당 파라미터를 사용하여 새로운 주소로 이동

이제 위 함수를 실행하면 새로운 주소창으로 변경된 page 파라미터 값을 사용하여 이동하게 됩니다. 여기까지 간단하게 현재 주소창의 파라미터를 변경하여 이동하는 방법을 알아보았습니다.

# 마치면서

위의 방법을 사용하지 않는다면 어떻게 해야할까요? 간단하게 생각할 수 있는 방법은 두 가지입니다. 첫 번째는 파라미터의 값이 적은 경우 새롭게 파라미터 값들을 계산하여 생성하는 방법입니다. 이 방법은 파라미터가 적은 경우에만 사용하는게 좋겠죠.

다음 방법은 정규표현식을 사용하는 방법입니다. 현재 주소창에 입력된 파라미터 중  page=숫자 부분을 찾아내어 숫자 부분만 다른 값으로 변경하면 되겠죠.