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



# 주소창의 현재 파라미터를 다른 값으로 바꾸기
쉽게 말해 현재 아래와 같은 페이지값의 파라미터를 다른 값으로 바꾸는 방법이라고 생각하시면 됩니다.
// 변경 전
https://webisfree.com?page=1

// 변경 후
https://webisfree.com?page=5

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

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

URLSearchParams

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

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

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


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

간단한 예제를 만들어보는게 가장 빠른 방법이죠. 아래의 함수는 현재 페이지를 다른 페이지로 변경하도록 이동하는 함수입니다. 인자로 원하는 페이지 값을 전달 받습니다.
const movePage = function(page) {
  const URLSearch = new URLSearchParams(location.search);
  URLSearch.set('page', String(page));
  const newParam = URLSearch.toString();

  window.open(location.pathname + '?' + newParam, '_self');
};

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

1. URLSearchParams를 사용하여 새로운 인스턴스 URLSearch 를 생성
const URLSearch = new URLSearchParams(location.search);

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

3. 변경된 파라미터를 문자열로 가져오기
const newParam = URLSearch.toString();

4. 마지막으로 해당 파라미터를 사용하여 새로운 주소로 이동
window.open(location.pathname + '?' + newParam, '_self');

이제 위 함수를 실행하면 새로운 주소창으로 변경된 page 파라미터 값을 사용하여 이동하게 됩니다.


여기까지 간단하게 현재 주소창의 파라미터를 변경하여 이동하는 방법을 알아보았습니다.



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

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