URLSearchParams와 useSearchParams

프론트 작업을 하다보면 url에 관한 작업을 정말 많이 다루게 된다.

next js와 바닐라 작업을 번갈아 하다보니 매일 해도 이 두개가 항상 헷갈린다.

출처: MDN

 

https://www.example.com:8000/test/?search=apple&category=fruit&category=food

 

URLSearchParams

• 브라우저 내장 api
• 수동으로 상태 연동 필요
• history.pushState로 직접 URL 업데이트
• 바로 .append() 사용 가능

const query = new URLSearchParams(window.location.search);
const name = query.get("search"); // ?search=apple 이면 "apple"
query.set("category", "fruit"); // 쿼리에 category=fruit 추가 또는 변경
query.append("category", "food"); // 기존 쿼리를 그대로 두고(중복 쿼리O) 추가
window.history.pushState(null, "", "?" + query.toString());

 

useSearchParams

• 리액트 전용 hook
• 컴포넌트 안에서만 사용
• 상태처럼 다뤄 자동 상태 연동
• setSearchParams으로 바로 URL 변경 가능
• .append() 자체는 사용 가능하나 react에서 상태는 불변성을 지켜야 하므로, 기존 객체를 직접 수정하는 대신 복사해서 수정

import { useSearchParams } from "react-router-dom";

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  const name = searchParams.get("search"); // ?search=apple 이면 "apple"
  searchParams.set("category", "fruit")
  
  const updateCategory = () => {
    const newParams = new URLSearchParams(searchParams.toString());
    newParams.append("category", "food");
    setSearchParams(newParams); // URL 업데이트
  };

  return <button onClick={updateCategory}>카테고리 추가</button>;
}