useParams vs useNavigate

useParams vs useNavigate

useParams와 useNavigate는 React Router에서 제공하는 Hook들이다.
이 둘은 라우팅 관련 기능을 사용할 때 아주 자주 사용한다.

useParams – URL의 파라미터를 가져오는 Hook

라우트(URL 경로) 안에 동적 파라미터가 있을 때, 그 값을 컴포넌트에서 꺼내서 사용하고 싶을 때 사용한다.

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import UserPage from './UserPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<UserPage />} />
      </Routes>
    </BrowserRouter>
  );
}

 

// UserPage.js
import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();

  return <h1>유저 ID: {id}</h1>;
}

export default UserPage;

• /user/42로 이동하면 → 유저 ID: 42 출력
• useParams()는 { id: '42' }처럼 객체 형태로 파라미터를 넘겨줘

 

useNavigate – 페이지 이동을 위한 Hook

버튼 클릭, 함수 실행 등의 이벤트 안에서 프로그래밍 방식으로 라우팅(이동) 하고 싶을 때 사용한다.

// HomePage.js
import { useNavigate } from 'react-router-dom';

function HomePage() {
  const navigate = useNavigate();

  const goToUser = () => {
    navigate('/user/123');
  };

  return (
    <button onClick={goToUser}>
      유저 페이지로 이동
    </button>
  );
}

export default HomePage;

 

 

• 버튼을 클릭하면 → /user/123 경로로 이동
• navigate(path)로 원하는 URL로 이동 가능

 

 

Hook	역할
useParams	URL 안의 동적 파라미터 값 읽기
useNavigate	버튼 클릭 등으로 코드에서 페이지 이동

 

 

useSearchParams란?

useSearchParams는 URL의 쿼리 파라미터를 읽고, 수정할 수 있게 해주는 Hook이다.
예: /products?category=books&page=2

const [searchParams, setSearchParams] = useSearchParams();

 

• searchParams: URL에서 현재 쿼리스트링 값을 가져오는 객체 (URLSearchParams 인스턴스)
• setSearchParams: URL 쿼리스트링을 변경할 수 있는 함수

예제 1: 쿼리스트링 읽기

// ProductsPage.js
import { useSearchParams } from 'react-router-dom';

function ProductsPage() {
  const [searchParams] = useSearchParams();

  const category = searchParams.get('category');
  const page = searchParams.get('page');

  return (
    <div>
      <p>카테고리: {category}</p>
      <p>페이지: {page}</p>
    </div>
  );
}

주소가 /products?category=books&page=2라면:

• category: "books"
• page: "2"

 

예제 2: 쿼리스트링 변경하기

// SearchBar.js
import { useSearchParams } from 'react-router-dom';

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

  const handleChange = (e) => {
    setSearchParams({ category: e.target.value });
  };

  return (
    <select onChange={handleChange} defaultValue={searchParams.get('category') || ''}>
      <option value="">전체</option>
      <option value="books">책</option>
      <option value="clothes">옷</option>
    </select>
  );
}

setSearchParams()를 호출하면 URL이 /products?category=books처럼 바뀌고, 컴포넌트도 리렌더링된다.

주의할 점

• searchParams.get()은 항상 문자열을 반환(null일 수도 있음)
• URL에만 반영되고, 상태(state)는 아님 → useState처럼 직접 값을 관리하지 않음

 

기능	설명
useSearchParams()	쿼리스트링 읽고, 수정하는 Hook
get('key')	특정 쿼리 파라미터 값 가져오기
setSearchParams()	URL 쿼리 파라미터 변경 (페이지 이동)