코드

import React from 'react'
import { useSearchParams } from 'react-router-dom'

function About() {
  const [searchParams, setSearchParams] = useSearchParams();
  const detail = searchParams.get('detail');
  const mode = searchParams.get('mode');

  function onToggleDetail() {
    setSearchParams({mode, detail: detail === 'true' ? false : true});
  }

  function onIncreaseMode() {
    setSearchParams({mode: mode === null ? 1 : parseInt(mode) + 1, detail});
  }

  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
      <p>detail: {detail}</p>
      <p>mode: {mode}</p>
      <button onClick={onToggleDetail}>Toggle Detail</button>
      <button onClick={onIncreaseMode}>mode + 1</button>
    </div>
  )
}

export default About

useSearchParams

• 배열 타입 반환
  • 첫 원소
    • 쿼리파라미터를 조회하거나 수정하는 매서드들이 담긴 객체 반환
    • get 메서드: 쿼리파라미터 조회
    • set 매서드: 쿼리파라미터 업데이트
    • 쿼리 파라미터가 존재하지 않는다면 null로 조회
  • 두 번째 원소
    • 쿼리파라미터를 객체 형태로 업데이트 할 수 있는 함수 반환

• 주의할 점

  • 쿼리파라미터를 조회할 때 값은 무조건 문자열 타입
  • 비교할 때 꼭 'true'처럼 따옴표로 감싸주고 숫자는 parseInt로 변환