[ JS ] searchParams 다루기

 searchParams에 대해서 정리를 해볼려고 한다. searchParams는 URL의 query string을 칭한다. searchParams를 읽어서 특정 데이터를 가져오거나, 카테고리 등 많은 곳에 사용이 된다.

 

https://keynut.co.kr?keyword=hello&page=3

위 URL에서 노란색 부분이 searchParams가 된다.

 

searchParams를 읽는 방법은

Next.js 14 App Router에서는 useSearchParams 훅을 사용하여 읽기 전용의 searchParams 객체를 리턴받을 수 있다.

useSearchParams 훅으로 리턴받은 searchParams는 읽기 전용이므로 직접 수정할 수 없다. 대신, URLSearchParams 객체를 사용해 searchParams를 수정할 수 있다.

// https://keynut/shop?keyword=hello&page=3

import { useRouter, useSearchParams } from 'next/navigation';

useSearchParams().get("keyword")  //  "hello"
useSearchParams().get("page")  //  '3'

const params = new URLSearchParams(useSearchParams().toString());
params.set("page",8)
params.delete("page")

//URL에 반영하기
const router = useRouter();
router.push(`/shop?${params.toString()}`);

 

Node.JS환경

// URL에서 searchParams를 읽어오는 방법
const url = new URL('https://keynut.co.kr?keyword=hello&page=3');
const searchParams = new URLSearchParams(url.search);

console.log(searchParams.get('keyword')); // "hello"
console.log(searchParams.get('page')); // "3"

// searchParams에 새로운 파라미터를 추가하거나 수정하는 방법
searchParams.set('category', 'books');
console.log(searchParams.toString()); // "keyword=hello&page=3&category=books"

// 기존 파라미터를 삭제하는 방법
searchParams.delete('page');
console.log(searchParams.toString()); // "keyword=hello&category=books"

 

브라우저 환경

현재 URL에서 searchParams 읽기

// 현재 페이지의 URL을 가져오는 방법
const currentUrl = window.location.href;
const url = new URL(currentUrl);
const searchParams = new URLSearchParams(url.search);

console.log(searchParams.get('keyword')); // 현재 URL의 keyword 파라미터 값 출력
console.log(searchParams.get('page')); // 현재 URL의 page 파라미터 값 출력

 

 현재 URL에서 searchParams 수정하기

// 현재 페이지의 URL을 가져오는 방법
const currentUrl = window.location.href;
const url = new URL(currentUrl);
const searchParams = new URLSearchParams(url.search);

// searchParams에 새로운 파라미터 추가
searchParams.set('category', 'books');
console.log(searchParams.toString()); // "keyword=hello&page=3&category=books"

// searchParams에서 파라미터 삭제
searchParams.delete('page');
console.log(searchParams.toString()); // "keyword=hello&category=books"

// 수정된 searchParams를 URL에 반영하는 방법
url.search = searchParams.toString();
const newUrl = url.toString();
console.log(newUrl); // 수정된 URL 출력