[React] useParams과 useSearchParams, 동적 경로

 

useParams과 useSearchParams은 React Router와 함께 사용합니다.

 

useParams()

/user/:id 와 같은 다이나믹 URL(또는 동적 경로)을 사용할 때 사용합니다

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

function UserProfile() {
  const { userId } = useParams(); // { userId: '123' } 형태로 파라미터를 추출

  return <div>User ID: {userId}</div>;

 

파라미터로 전달된 userId를 받아 User ID : 123을 출력합니다

 

useSearchParams()

 

쿼리스트링 형식(?name=son&age=33)의 파라미터를 다루는 데 사용합니다

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

function UserList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const name = searchParams.get('name');
  const age = searchParams.get('age');

  const updateSearchParams = () => {
    setSearchParams({ name: 'Doe', age: 25 });
  };

  return (
    <div>
      <div>Name: {name}</div>
      <div>Age: {age}</div>
      <button onClick={updateSearchParams}>Update Search Params</button>
    </div>
  );
}

 

Update Search Params를 클릭하면 Name : son / Age : 33의 값이 Name : Doe / Age : 25로 바뀝니다