url ➡️ aaa/bbb?abc=1234&xyz=0

• query string ➡️ abc 🟰 1234, xyz 🟰 0
• 라우터 처리 시 언급 ❌ ➡️ link 시 /main?abc=1234 로 처리
  • query string 값이 없을 때 navigate 처리도 가능

react에서 query string 다루기

import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

// url ➡️ /main?snowball=1
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('snowball')); // 1

useEffect(() => {
  searchParams.set('snowball', '4'); // /main?snowball=4로 변경
  setSearchParams(searchParams); // url 변경 적용
}, [searchParams, setSearchParams]);

[React] 쿼리 스트링