라우트 파라미터와 쿼리 문자열

동적 라우팅은 React 애플리케이션에서 유연한 페이지 구성을 가능하게 합니다.

이를 구현하는 주요 방법으로 라우트 파라미터와 쿼리 문자열이 있습니다. 이 절에서는 두 방법의 사용법과 차이점을 살펴보겠습니다.

라우트 파라미터 사용하기

라우트 파라미터는 URL의 일부로 동적 값을 전달하는 방법입니다. React Router에서는 :paramName 형식으로 정의합니다.

import { BrowserRouter as Router, Route, useParams } from 'react-router-dom';
 
function UserProfile() {
  let { userId } = useParams();
  return <h2>User Profile: {userId}</h2>;
}
 
function App() {
  return (
    <Router>
      <Route path="/users/:userId" component={UserProfile} />
    </Router>
  );
}

이 예제에서 /users/123으로 접근하면 UserProfile 컴포넌트가 렌더링되고, userId는 "123"이 됩니다.

useParams 훅 사용하기

useParams 훅은 현재 URL의 파라미터를 객체 형태로 반환합니다.

import { useParams } from 'react-router-dom';
 
function BlogPost() {
  let { category, postId } = useParams();
  return (
    <div>
      <h2>Category: {category}</h2>
      <h3>Post ID: {postId}</h3>
    </div>
  );
}
 
// 라우트 설정
<Route path="/blog/:category/:postId" component={BlogPost} />

옵셔널 파라미터 처리

옵셔널 파라미터는 존재할 수도, 존재하지 않을 수도 있는 파라미터입니다.

이를 처리하려면 중첩 라우트를 사용할 수 있습니다.

function Product({ match }) {
  return (
    <div>
      <h2>Product: {match.params.id}</h2>
      <Route path={`${match.path}/:variant`} component={ProductVariant} />
    </div>
  );
}
 
function ProductVariant({ match }) {
  return <h3>Variant: {match.params.variant}</h3>;
}
 
// 라우트 설정
<Route path="/products/:id" component={Product} />

이 설정에서 /products/123과 /products/123/large 모두 유효한 URL이 됩니다.

쿼리 문자열 처리하기

쿼리 문자열은 URL의 ? 뒤에 오는 키-값 쌍입니다.

React Router에서는 useLocation 훅을 사용하여 쿼리 문자열을 처리할 수 있습니다.

import { useLocation } from 'react-router-dom';
 
function useQuery() {
  return new URLSearchParams(useLocation().search);
}
 
function SearchResults() {
  let query = useQuery();
  return <h2>Search results for: {query.get("q")}</h2>;
}

이 예제에서 /search?q=react로 접근하면 "Search results for: react"가 표시됩니다.

useLocation 훅 사용하기

useLocation 훅은 현재 URL에 대한 정보를 제공합니다.

import { useLocation } from 'react-router-dom';
 
function PageView() {
  let location = useLocation();
  return (
    <div>
      <h2>Current Path: {location.pathname}</h2>
      <p>Search: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
}

라우트 파라미터 vs 쿼리 문자열 : 언제 무엇을 사용해야 할까?

라우트 파라미터

리소스를 식별하는 필수적인 데이터에 사용
URL의 계층 구조를 표현할 때 유용
예 : /users/123, /products/electronics/laptop

쿼리 문자열

옵션이나 필터링과 같은 부가적인 데이터에 사용
정렬, 페이지네이션, 검색 쿼리 등에 적합
예 : /products?category=electronics&sort=price_asc

가이드라인

일관성 유지 : 애플리케이션 전체에서 파라미터와 쿼리 문자열 사용 패턴을 일관되게 유지하세요.
의미 있는 URL 구조 : URL이 리소스의 구조를 명확하게 표현하도록 설계하세요.
필수 vs 선택 : 필수적인 식별자는 라우트 파라미터로, 선택적인 데이터는 쿼리 문자열로 처리하세요.
SEO 고려 : 검색 엔진 최적화가 중요한 경우, 주요 식별자는 라우트 파라미터로 사용하는 것이 좋습니다.
복잡성 관리 : 너무 많은 중첩 파라미터는 URL을 복잡하게 만들 수 있습니다. 적절히 쿼리 문자열과 조합하세요.

예제 : 라우트 파라미터와 쿼리 문자열 조합

import { useParams, useLocation } from 'react-router-dom';
 
function ProductList() {
  let { category } = useParams();
  let query = new URLSearchParams(useLocation().search);
  let sort = query.get('sort');
 
  return (
    <div>
      <h2>Category: {category}</h2>
      <p>Sorting by: {sort || 'default'}</p>
      {/* 제품 목록 렌더링 */}
    </div>
  );
}
 
// 라우트 설정
<Route path="/products/:category" component={ProductList} />

이 예제에서 /products/electronics?sort=price_asc와 같은 URL을 처리할 수 있습니다.

라우트 파라미터와 쿼리 문자열을 효과적으로 사용하면 더 유연하고 의미 있는 URL 구조를 만들 수 있습니다.

이는 사용자 경험 향상뿐만 아니라 SEO에도 도움이 됩니다.

또한, 서버 측에서 API를 설계할 때도 이러한 URL 구조를 반영하면 프론트엔드와 백엔드 간의 일관성을 유지할 수 있습니다.

React Router의 이러한 기능들을 활용하면 복잡한 라우팅 시나리오도 쉽게 처리할 수 있으며, 사용자에게 직관적이고 탐색하기 쉬운 웹 애플리케이션을 제공할 수 있습니다.

React Router 사용법 중첩 라우팅 소개