URLSearchParams 쿼리스트링 값 가지고 오는 방법

웹 개발에서 쿼리스트링은 URL에 포함된 데이터를 의미합니다. 페이지 이동 시 데이터를 전달하거나 페이지 로딩 시 특정 기능을 수행하는데 활용됩니다. 이 글에서는 자바스크립트의 URLSearchParams 객체를 사용하여 쿼리스트링 값을 손쉽게 가져오는 방법을 알아봅니다.

1. URLSearchParams 객체 생성

먼저 URLSearchParams 객체를 생성해야 합니다. 두 가지 방법으로 객체를 생성할 수 있습니다.

1.1 URL 객체 사용

const url = new URL('https://www.example.com/?page=2&sort=asc');

const searchParams = new URLSearchParams(url.search);
// const searchParams = new URLSearchParams(location.search); 현재 URL 가지고 오기

1.2 직접 쿼리스트링 전달

const searchParams = new URLSearchParams('?page=2&sort=asc');

2. 쿼리스트링 값 가져오기

URLSearchParams 객체에는 다양한 메서드가 존재하며, 쿼리스트링 값을 가져오는 데에는 다음 메서드를 사용합니다.

2.1 get() 메서드

특정 키에 대한 값을 가져옵니다. 키가 존재하지 않으면 null을 반환합니다.

const page = searchParams.get('page'); // 2
const sort = searchParams.get('sort'); // 'asc'
const nonExistingKey = searchParams.get('nonExistingKey'); // null

2.2 getAll() 메서드

동일한 키가 여러 번 존재할 경우 모든 값을 배열 형태로 반환합니다.

const searchParams = new URLSearchParams('?key=value1&key=value2');
const values = searchParams.getAll('key'); // ['value1', 'value2']

2.3 has() 메서드

특정 키가 존재하는지 확인합니다.

const hasPageKey = searchParams.has('page'); // true
const hasNonExistingKey = searchParams.has('nonExistingKey'); // false

3. 쿼리스트링 조작

URLSearchParams 객체는 쿼리스트링을 편리하게 조작할 수 있도록 다양한 메서드를 제공합니다.

3.1 set() 메서드

특정 키에 대한 값을 설정하거나 덮어씁니다.

searchParams.set('page', 3);
searchParams.set('sort', 'desc');

3.2 append() 메서드

동일한 키에 대한 값을 추가합니다.

searchParams.append('key', 'value3');

3.3 delete() 메서드

특정 키를 삭제합니다.

searchParams.delete('page');

4. 쿼리스트링 문자열 얻기

URLSearchParams 객체를 문자열로 변환하면 쿼리스트링을 얻을 수 있습니다.

const queryString = searchParams.toString(); // '?page=3&sort=desc&key=value1&key=value2&key=value3'

5. 예시

다음은 URLSearchParams 객체를 사용하여 쿼리스트링 값을 가져오고 조작하는 예시입니다.

const url = new URL('https://www.example.com/?page=2&sort=asc');
const searchParams = new URLSearchParams(url.search);

// 쿼리스트링 값 가져오기
const page = searchParams.get('page'); // 2
const sort = searchParams.get('sort'); // 'asc'

// 쿼리스트링 조작
searchParams.set('page', 3);
searchParams.append('filter', 'new');

// 쿼리스트링 문자열 얻기
const queryString = searchParams.toString(); // '?page=3&sort=asc&filter=new'

// 쿼리스트링 출력
console.log(queryString);

6. 결론

URLSearchParams 객체는 웹 개발에서 쿼리스트링을 다루는 데 매우 유용합니다. 이 글에서 소개된 방법을 활용하면 쿼리스트링 값을 손쉽게 가져오고 조작할 수 있으며, 이는 웹 페이지 기능을 강화하고 사용자 경험을