[React] 리액트 Router - 파라미터 & 쿼리

React Router는 클라이언트 측 라우팅을 쉽게 구현할 수 있는 도구로, URL을 기반으로 경로를 관리하면서 다양한 데이터(파라미터, 쿼리 등)를 전달하고 처리하는데 매우 유용합니다. 특히, URL을 통해 데이터를 전달할 수 있는 동적 파라미터와 쿼리 스트링은 페이지 간 데이터 전달과 필터링 기능을 구현하는데 필수적입니다.

 

 

 

목차

 

1. useParams - 동적 URL 파라미터 사용하기

2. useSearchParams - 쿼리 스트링 사용하기

3. 파라미터와 쿼리 스트링을 함께 사용하기

4. navigate - 쿼리 스트링 동적으로 변경하기

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. useParams - 동적 URL 파라미터 사용하기

URL 파라미터는 경로의 일부로 특정 데이터를 전달하는 방법입니다. 예를 들어, /products/:id와 같은 동적 경로에서는 id 값을 동적으로 전달할 수 있습니다. 이때 useParams 훅을 사용하여 해당 경로의 파라미터를 읽어와 사용할 수 있습니다.

 

useParmas 예시

import { BrowserRouter as Router, Route, Routes, useParams } from 'react-router-dom';

function ProductDetail() {
  // useParams 훅을 사용하여 경로 파라미터(id)를 읽어옴
  const { id } = useParams();
  return <h2>Product ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 동적 경로 설정 */}
        <Route path="/products/:id" element={<ProductDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

 

위 코드에서 /products/:id는 동적 경로로, URL에서 id 값을 받아와 ProductDetail 컴포넌트에 표시합니다. 예를 들어 /products/10로 이동하면, "Product ID: 10"이 출력됩니다.

 

언제 useParams을 사용할까?

• 특정 ID나 이름을 경로를 통해 전달할 때
• URL에 따라 페이지 또는 데이터를 동적으로 렌더링 할 때
• RESTful API 방식의 라우팅에서 자주 사용됨

 

2. useSearchParams - 쿼리 스트링 사용하기

쿼리 스트링은 URL에 ? 뒤에 붙는 부분으로, 데이터를 필터링하거나 검색 결과를 처리할 때 자주 사용됩니다. React Router에서는 useSearchParams 훅을 통해 쿼리 스트링을 쉽게 관리할 수 있습니다.

 

useSearchParams 예시

import { BrowserRouter as Router, Route, Routes, useSearchParams } from 'react-router-dom';

function ProductList() {
  // useSearchParams 훅으로 쿼리 스트링을 읽어옴
  const [searchParams] = useSearchParams();
  const category = searchParams.get('category'); // 'category' 쿼리 스트링 읽기
  const priceRange = searchParams.get('price');

  return (
    <div>
      <h2>Product List</h2>
      <p>Category: {category}</p>
      <p>Price Range: {priceRange}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 쿼리 스트링을 받을 수 있는 경로 */}
        <Route path="/products" element={<ProductList />} />
      </Routes>
    </Router>
  );
}

export default App;

 

이 코드를 실행하면 /products?category=shoes&price=100-200과 같은 URL에서 category는 shoes, priceRange는 100-200으로 읽어와 렌더링 됩니다.

 

언제 useSearchParams를 사용할까?

• 필터링이나 검색 같은 작업에서 다양한 조건을 URL로 전달할 때
• 페이지네이션 같은 상태를 URL로 저장하고 관리할 때
• 여러 개의 파라미터 값을 처리해야 할 때

 

3. 파라미터와 쿼리 스트링을 함께 사용하기

때로는 동적 파라미터와 쿼리 스트링을 함께 사용해야 할 때가 있습니다. 예를 들어, 특정 카테고리의 제품 목록을 표시하면서 가격 범위나 정렬 옵션을 쿼리 스트링으로 전달할 수 있습니다.

 

파라미터와 쿼리 스트링 동시 사용

import { BrowserRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router-dom';

function CategoryProductList() {
  const { category } = useParams(); // URL 파라미터로 카테고리 받기
  const [searchParams] = useSearchParams();
  const sortBy = searchParams.get('sort'); // 쿼리 스트링으로 정렬 기준 받기

  return (
    <div>
      <h2>Category: {category}</h2>
      <p>Sort By: {sortBy}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 카테고리별로 제품 목록을 표시하며, 쿼리 스트링으로 정렬 기준을 받음 */}
        <Route path="/products/:category" element={<CategoryProductList />} />
      </Routes>
    </Router>
  );
}

export default App;

 

위 예시에서 /products/shoes?sort=price로 이동하면, category는 shoes, sortBy는 price로 읽어와 해당하는 데이터를 화면에 출력합니다.

 

언제 파라미터와 쿼리 스트링을 함께 사용하나요?

• 특정 경로에 따라 페이지를 분리하고, 상세 필터는 쿼리 스트링으로 처리할 때
• 동적 페이지와 동시에 다양한 상태를 URL에 저장해야 할 때

 

4. navigate - 쿼리 스트링 동적으로 변경하기

사용자의 입력에 따라 쿼리 스트링을 동적으로 추가하거나 변경해야 할 때가 있습니다. 이 경우 navigate 함수를 사용하여 페이지를 리다이렉트 할 수 있습니다.

 

navigate 예시

import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';

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

  const handleSearch = (query) => {
    // 쿼리 스트링을 포함하여 검색 페이지로 이동
    if (e.key === 'Enter') navigate(`/search?query=${query}`);
  };

  return (
    <div>
      <input type="text" placeholder="검색어를 입력해주세요." onKeyDown={(e) => {
        handleSearch(e.target.value);
      }} />
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/search" element={<SearchPage />} />
      </Routes>
    </Router>
  );
}

export default App;

 

위 코드에서는 사용자가 검색어를 입력하고 엔터를 치면 해당 검색어를 쿼리 스트링으로 전달하여 /search?query=검색어 형식의 URL로 리다이렉트 됩니다.

 

언제 navigate로 쿼리 스트링을 변경하나요?

• 사용자 입력에 따라 URL을 동적으로 변경해야 할 때
• 리다이렉션 시 URL에 추가 정보를 담아야 할 때

 

 

 

React Router에서 URL 파라미터와 쿼리 스트링을 사용하면 데이터를 전달하고 페이지를 동적으로 렌더링 할 수 있습니다.

• useParams: 경로에서 동적 파라미터를 추출하여 데이터를 처리할 때 사용.
• useSearchParams: 쿼리 스트링을 통해 필터링, 검색 조건 등을 전달할 때 사용.
• navigate: 쿼리 스트링을 동적으로 변경하거나 페이지를 리다이렉트할 때 사용.

 

 

추천글

[React] 리액트 Router란?

 

[React] 리액트 Context