[📖]React-Params, Query, Hash 값 추출

1️⃣Params (경로 파라미터)

import { useParams } from 'react-router-dom';

function CanvasDetail() {
  const { id } = useParams();
  return (
    <>
      <div>
        <h2>param 추출</h2>
        <p>param : {id}</p>
      </div>
    </>
  );
}

export default CanvasDetail;

🔸useParams() 훅을 사용해 URL 경로에 포함된 :id와 같은 동적 값을 추출할 수 있다.

2️⃣Query String (쿼리 문자열)

import { useParams, useSearchParams } from 'react-router-dom';

function CanvasDetail() {
  const { id } = useParams();
  const [searchParams] = useSearchParams();

  return (
    <>
      <div>
        <h2>param 추출</h2>
        <p>param : {id}</p>
        <p>keword : {searchParams.get('keyword')}</p>
      </div>
    </>
  );
}

export default CanvasDetail;

🔸useSearchParams() 훅을 사용해 URL의 쿼리 문자열 값을 가져올 수 있다.
🔸searchParams.get('keyword') 형태로 원하는 값을 추출할 수 있다.

3️⃣Hash (해시, 프래그먼트)

import { useParams, useSearchParams, useLocation } from 'react-router-dom';

function CanvasDetail() {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const location = useLocation();

  return (
    <>
      <div>
        <h2>param 추출</h2>
        <p>param : {id}</p>
        <p>keword : {searchParams.get('keyword')}</p>
        <p>hash : {location.hash}</p>
      </div>
    </>
  );
}

export default CanvasDetail;

🔸 useLocation() 훅을 사용하면 URL 전체 위치 정보에 접근할 수 있다.
🔸 location.hash를 통해 # 이후의 해시값을 추출할 수 있다.