JavaScript로 URL 파라미터 업데이트하는 방법

웹 애플리케이션을 개발하다 보면 URL의 파라미터(query string)를 추가하거나 변경해야 하는 상황이 자주 발생합니다. 예를 들어, 필터링 조건을 URL에 반영하거나, 특정 상태를 공유 가능한 URL로 만들고 싶을 때죠.

이번 포스팅에서는 JavaScript를 사용해서 URL 파라미터를 동적으로 업데이트하는 방법을 실전 예제와 함께 알아보겠습니다.

 

📌 URL 파라미터란?

URL 파라미터는 ? 뒤에 붙는 쿼리 스트링을 의미합니다.

https://example.com/page?category=books&page=2

 

위 URL에서 category=books, page=2는 URL 파라미터입니다.

 

🛠️ URL 파라미터 업데이트 방법

1. URLSearchParams 사용하기 (추천)

현대적인 브라우저에서는 URLSearchParams 객체를 사용하면 아주 쉽게 파라미터를 다룰 수 있습니다.

const url = new URL(window.location.href);
const params = url.searchParams;

params.set('page', 3); // page 파라미터를 3으로 변경
params.set('category', 'electronics'); // category를 electronics로 변경

// URL을 갱신 (페이지를 리로드하지 않음)
window.history.replaceState({}, '', `${url.pathname}?${params}`);

💡 set()과 delete() 사용법

params.set('sort', 'price_desc'); // 없으면 추가, 있으면 수정
params.delete('filter');          // 특정 파라미터 제거

---

2. 기존 URL에서 직접 문자열 조작하기 (비추천)

아래 방식은 옛날 코드에서 종종 보이지만, 문자열을 직접 다루기 때문에 실수가 생기기 쉽습니다.

let currentUrl = window.location.href;
if (currentUrl.includes('page=')) {
  currentUrl = currentUrl.replace(/page=\d+/, 'page=3');
} else {
  currentUrl += (currentUrl.includes('?') ? '&' : '?') + 'page=3';
}
window.history.replaceState({}, '', currentUrl);

가능하면 URL과 URLSearchParams를 사용하는 것이 훨씬 안전하고 깔끔합니다.

---

🔄 replaceState vs pushState

• replaceState: 현재 URL을 새 URL로 교체 (히스토리 기록 안 남음)
• pushState: 새 URL을 히스토리에 추가 (뒤로가기 시 이전 페이지로 돌아감)

window.history.pushState({}, '', `${url.pathname}?${params}`);

---

✅ 예제: 필터 버튼을 클릭하면 URL에 반영하기

<button onclick="updateFilter('color', 'red')">빨간색</button>
<button onclick="updateFilter('color', 'blue')">파란색</button>

<script>
  function updateFilter(key, value) {
    const url = new URL(window.location.href);
    url.searchParams.set(key, value);
    window.history.replaceState({}, '', `${url.pathname}?${url.searchParams}`);
  }
</script>

---

마무리

URLSearchParams와 history API를 활용하면 페이지를 새로 고치지 않고도 URL 파라미터를 손쉽게 조작할 수 있습니다. 이는 사용자 경험 향상은 물론, 공유 가능한 URL을 만들 때도 매우 유용합니다.