[JS] 자바스크립트 URL.searchParams

 

searchParams는 자바스크립트에서 URL 쿼리 스트링 부분을 쉽게 다룰 수 있게 도와주는 기능

 

1. 쿼리 스트링

URL에 정보를 넘겨줘야 할 때 주소 뒤에 '?' 물음표와 함께 붙는 쿼리 스트링에 담겨진다.

쿼리 스트링은 'key=value'로 구성되고 여러개를 묶을 땐 '&'로 구분한다.

 

예를 들어 https://tistory.com?page=1&category=blog 라는 URL이 있을 때

page는 key값이 되고, 1은 value값, 또 뒤에 category가 키, blog가 value값이 된다.

 

2. 메소드

const url = new URL("https://tistory.com");
const url = new URLSearchParams(window.location.search);

직접 URL 객체를 설정해도 되고, 현재 페이지 경로에서 쿼리 매개변수를 다루고 싶다면 window.loacation.search를 넣으면 된다.

현재 페이지에 대한 객체를 생성하고 메소드로 업데이트 했다면

const newPathname = `${window.location.pathname}?${url.toString()}` 해주면 '&'기호로 연결한 문자열을 반환한 새로운 url을 나타낸다.

 

 

1) append

url.searchParams.append("page", "1");
url.searchParams.append("category", "blog");
url.toString() // 'https://tistory.com?page=1&category=blog'

append는  key-value 쌍으로 항목을 넣어 쿼리 파라미터를 추가하는 메소드로

"https://tistory.com?page=1&category=blog" url이 이렇게 구성된다.

 

2. set

url.searchParams.set("page", 2);
url.toString() // 'https://tistory.com?page=2&category=blog'

set은 매개변수로 전달한 값으로 쿼리 파라미터 값을 변경하여 "https://tistory.com?page=2&category=blog" url이 이렇게 바뀐다.

 

3. delete

url.searchParams.delete("category")
url.toString() // 'https://tistory.com?page=2

delete는 쿼리 파라미터를 삭제해서 "https://tistory.com?page=2" url이 이렇게 변경된다.

 

이 외에도 많지만 이렇게 URL 쿼리 파라미터를 추가, 변경, 삭제할 수 있다.