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

import { Route, Routes } from 'react-router';
import ProductDetail from './pages/ProductDetail';
import ProductList from './pages/ProductList';

export default function AppRoutes() {
  return (
    <Routes>
      <Route path="/products" element={<ProductList />} />
      <Route path="/products/:productId" element={<ProductDetail />} />
      <Route path="*" element={<p>요청한 화면을 찾을 수 없습니다.</p>} />
    </Routes>
  );
}

import { useParams } from 'react-router';

const productData = {
  '123': { name: 'React 신발', description: 'React 개발자를 위한 신발' },
  '456': { name: '리액트 후드티', description: 'React 로고 후드티' },
};

export default function ProductDetail() {
  const { productId } = useParams();
  const hasValidShape = productId !== undefined && /^\d+$/.test(productId);
  const product = hasValidShape ? productData[productId] : undefined;

  if (!product) {
    return (
      <main>
        <h1>제품을 찾을 수 없습니다</h1>
        <p>제품 번호의 형식과 존재 여부를 확인해 주세요.</p>
      </main>
    );
  }

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>제품 ID: {productId}</p>
    </main>
  );
}

import { Link, useSearchParams } from 'react-router';

const allProducts = [
  { id: '1', name: '노트북', category: 'electronics' },
  { id: '2', name: '키보드', category: 'electronics' },
  { id: '3', name: '책상', category: 'furniture' },
  { id: '4', name: '의자', category: 'furniture' },
];

const categoryOptions = [
  { value: '', label: '전체' },
  { value: 'electronics', label: '전자제품' },
  { value: 'furniture', label: '가구' },
];
const allowedCategories = new Set(categoryOptions.map(({ value }) => value));

export default function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();

  const rawCategory = searchParams.get('category') ?? '';
  const category = allowedCategories.has(rawCategory) ? rawCategory : '';
  const query = searchParams.get('q') ?? '';
  const normalizedQuery = query.trim().toLocaleLowerCase();

  const filteredProducts = allProducts.filter((product) => {
    const matchesCategory = !category || product.category === category;
    const matchesQuery = product.name.toLocaleLowerCase().includes(normalizedQuery);
    return matchesCategory && matchesQuery;
  });

  function updateParam(name, value, options) {
    const next = new URLSearchParams(searchParams);
    if (value) next.set(name, value);
    else next.delete(name);
    setSearchParams(next, options);
  }

  return (
    <main>
      <h1>제품 목록</h1>

      <fieldset>
        <legend>카테고리</legend>
        {categoryOptions.map((option) => (
          <button
            key={option.value || 'all'}
            type="button"
            aria-pressed={category === option.value}
            onClick={() => updateParam('category', option.value)}
          >
            {option.label}
          </button>
        ))}
      </fieldset>

      <label htmlFor="product-search">제품 검색</label>
      <input
        id="product-search"
        type="search"
        value={query}
        onChange={(event) =>
          updateParam('q', event.target.value, { replace: true })
        }
      />

      <p role="status" aria-live="polite">
        검색 결과 {filteredProducts.length}개
      </p>
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>
            <Link to={`/products/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}