new URLSearchParams 객체 / 쿼리스트링 객체

쿼리 스트링의 키-값 쌍을 추가하고, 제거하고, 문자열을 직접 생성할 수 있는 생성자.

const params = new URLSearchParams();

 

append() 메서드와 set() 메서드의 차이

append()는 키-값 쌍을 계속 추가하고

const params = new URLSearchParams();

params.append('qs', 'test1');
params.append('qs', 'test2');

console.log(params.toString());

// qs=test1&qs=test2

 

set()은 교체한다.

const params = new URLSearchParams();

params.set('qs', 'test1');
params.set('qs', 'test2');

console.log(params.toString());

// qs=test2

 

get() 키에 해당하는 값 검색

const params = new URLSearchParams();
params.set('qs','test')

const newParams = params.get('qs');

console.log(newParams); // test

 

delete() 키 제거

params.delete('qs');

 

Next의 useSearchParams가 Readonly이기 때문에 값의 변경이 필요할 때 사용한다.