[React] URLSearchParams

URLSearchParams는 JavaScript에서 URL의 쿼리 문자열(query string)을 쉽게 다룰 수 있도록 해주는 내장 API입니다. 주로 URL의 파라미터들을 파싱하거나, 새 파라미터를 추가하거나, URL을 수정할 때 사용됩니다. 브라우저 환경에서 주로 사용되며, URL에 포함된 쿼리 매개변수를 간단하게 처리할 수 있도록 돕습니다.

기본적인 사용법

1. URL에서 쿼리 파라미터를 추출
2. 새로운 쿼리 파라미터를 추가
3. 쿼리 파라미터 수정
4. 쿼리 파라미터를 삭제
5. 문자열로 변환

생성

URLSearchParams 객체는 URL의 쿼리 문자열을 인자로 받아 생성할 수 있습니다.

 

// URL의 쿼리 문자열에서 생성
const params = new URLSearchParams('?name=John&age=30'); 
// 또는 빈 객체로 생성한 후, 나중에 파라미터를 추가할 수 있습니다. 
const params2 = new URLSearchParams();

주요 메서드와 사용법

1. get(): 특정 키의 값을 가져오기

const params = new URLSearchParams('?name=John&age=30'); 
console.log(params.get('name'));
// "John" 
console.log(params.get('age')); 
// "30"

2. set(): 파라미터 추가 또는 수정

const params = new URLSearchParams('?name=John&age=30');
params.set('name', 'Doe'); // 기존 'name' 값을 'Doe'로 변경
params.set('country', 'USA'); // 새로운 파라미터 추가

console.log(params.toString()); // "name=Doe&age=30&country=USA"

3. append(): 동일한 키로 여러 값을 추가

const params = new URLSearchParams();
params.append('filter', 'name');
params.append('filter', 'age');

console.log(params.toString()); // "filter=name&filter=age"

4. delete(): 파라미터 삭제

const params = new URLSearchParams('?name=John&age=30');
params.delete('age'); // 'age' 파라미터 삭제

console.log(params.toString()); // "name=John"

5. has(): 특정 키의 존재 여부 확인

const params = new URLSearchParams('?name=John&age=30');
console.log(params.has('name')); // true
console.log(params.has('gender')); // false

6. keys()/values()/entries(): 반복(iteration)

const params = new URLSearchParams('?name=John&age=30');

// keys() 예시
for (const key of params.keys()) {
  console.log(key); // "name", "age"
}

// values() 예시
for (const value of params.values()) {
  console.log(value); // "John", "30"
}

// entries() 예시
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`); // "name: John", "age: 30"
}

브라우저 호환성

URLSearchParams는 대부분의 최신 브라우저에서 지원됩니다. IE를 제외한 대부분의 모던 브라우저(Chrome, Firefox, Edge, Safari)에서 사용할 수 있습니다. Node.js 환경에서도 사용이 가능합니다.

결론

URLSearchParams는 URL 쿼리 문자열을 쉽게 처리할 수 있는 유용한 API로, URL의 파라미터를 파싱하거나 조작할 때 매우 편리하게 사용할 수 있습니다.