pagination 기능을 구현하던 도중 URLSearchPArams 와 useSearchParams 를 알게되었다.

URLSearchParams

흔히 searchParameter 라고 불리는 쿼리 스트링은 URL에서 경로 다음에 나오는 문자열이다.
URLSearchParams 는 자바스크립트에서 URL쿼리 매개변수를 쉽게 조작할 수 있는 인터페이스이다(쿼리 파라미터 추가, 수정, 삭제, 문자열로 변환 등 다양한 기능 가능).

일반적인 문자열 처리 방법은 문자열 파싱이 필요하고, 매개변수 조작이 어렵다. 따라서 이 인터페이스를 사용하여 페이지네이션 , sort 기능 등 을 구현할때 용이하다.

URLSearchParams 사용법

new 키워드로 인스턴스를 생성하고 조작할 경로를 인자로 전달한다.

const UrlParams = new URLSearchParams("page=1&sort=name")

이런식으로 인자에 경로를 작성할수 있다.
혹은 내가 쓴 방법 처럼

const location = useLocation();
const UrlParams = new URLSearchParams(location.search)

로 현재 페이지의 URL에서 쿼리 매개변수를 추출하여 URLSearhParams객체를 생성할 수 있다. (useLocation 사용하거나 window.location.search 사용)

URLSearhParams 객체를 생성하였다면 다양한 메서드를 사용하여 매개변수를 조작할 수 있다.

그렇다면 이제 주요 메서드를 알아보자.

set("key",value) 메서드

set 메서드는 URLSearchParams 객체에 새로운 쿼리 매개변수를 추가하거나 기존 매개변수의 값을 변경하는 데 사용된다. 이 메서드는 특정 키(key)와 값(value)을 받아들이며, 해당 키가 이미 존재한다면 값을 덮어쓰고, 존재하지 않는다면 새로운 키-값 쌍을 추가한다.

아래는 내가 사용한 예시이다.
저렇게 사용하면 첫 마운트 시, URL 주소창에는 http://localhost:3000/?currentPage=1 와 같이 표시될것이다.

<사용 예시>

// URLSearchParams 객체 생성
const urlParams = new URLSearchParams(location.search);

// 페이지당 보여줄 데이터 수와 현재 페이지 설정
const limit = Number(urlParams.get("limit")) || 20;
const currentPage = Number(urlParams.get("currentPage")) || 1;

// 첫 마운트시 초기 유저 데이터 설정 및 currentPage 업데이트
useEffect(() => {
   setUserData(createUsers());
   urlParams.set("currentPage", 1);
 }, []); 

***set 메서드를 통해 key,value 값을 설정해줘야 아래 get 메서드 사용 가능. 만약 초기 주소를 key , value 가 설정된 값으로 먼저 설정하였다면 set메서드 없이 바로 get 메서드를 통해 해당 파라미터 관리 가능.

get("key") / getAll("key") 메서드

get메서드는 URLSearhParams객체에 저장되어있는 key값에 해당하는 값을 가져온다. 여기서 하나의 키에 여러가지 값이 저장되어있을경우 get() 은 첫번째값만 반환하고, getAll() 은 모든값을 배열로 반환한다.

<사용 예시>

//초기 주소 "page=&sort=name" 로 설정
const urlParams= new URLSearchParams("page=1&sort=name")

console.log(urlParams.get("sort") // 출력: "name"

or

const urlParams = new URLSearchParams("page=1&page=name");

console.log(params.getAll("page")); // 출력: ["1", "name"]

append("key",value) 메서드

지정된 이름(key)과 값(value)으로 새로운 매개변수를 추가하는 메소드. 만약 이미 같은 이름의 매개변수가 존재한다면, 이전 값에 추가된다.

<사용 예시>

const urlParams = new URLSearchParams();
params.append("page", "1");
params.append("sort", "name");
console.log(params.toString()); // 출력: "page=1&sort=name"

delete("key") 메서드

지정된 "key" 값의 매개변수를 제거하는 메서드

<사용 예시>

const urlParams = new URLSearchParams("page=1&page=name");
params.delete("page");
console.log(params.toString()); // 출력: "page=name"

has("key") 메서드

지정된 "key"값의 매개변수가 있는지 여부를 확인하는 메서드

<사용 예시>

const urlParams = new URLSearchParams("page=1&page=name");
console.log(params.has("page")); // 출력: true

URLSearchParams vs useSearchParams 의 차이

이쯤에서 드는 생각은 useSearchParams 와 다른점이 무엇이냐일 것이다.

useSearchParams와 URLSearchParams는 모두 URL의 쿼리 문자열을 다루는 데 사용되지만, 다음과 같은 주요한 차이점이 있다.

1. 사용목적

• useSearchParams : 리액트 라우터에서 제공하는 훅 함수. 상태를 가지고 있으며 이를 사용하여 리액트 컴포넌트 내에서 현재 URL 쿼리 문자열을 읽고 쓸수 있음.
• URLSearchParams : 웹 플랫폼의 내장 API 중 하나. 자바스크립트 코드 내에서 URL쿼리 문자열 조작 가능.

2. 사용방법

• useSearchParams: 리액트 함수형 컴포넌트 내에서 사용되며, 리액트 라우터 패키지를 사용하는 경우에만 사용할 수 있음.
• URLSearchParams: 일반 JavaScript 코드 내에서 사용. URLSearchParams 객체를 생성하여 URL의 쿼리 문자열을 읽고 쓸 수 있음.

나는 페이지네이션 및 sort 기능 (유저 데이터 오름차순/내림차순/이름순/나이순 등등) 을 구현할때 useSearchParams 와 URLSearchParams 둘다 섞어서 구현했는데 , 일반적으로 리액트에서는 useSearchParams 을 사용하는게 편리하다고 한다. 그러나 일반적인 자바스크립트 코드에서 URL의 쿼리 문자열을 조작해야하는 경우에는 URLSearchParams 을 사용하는게 좋다. 모든 코드에 정답은 없으니 .. 화이팅