[🍎코딩애플 강의요약]URL 파라미터로 상세페이지 100개 만들기 🎯

상세페이지에 실제 상품 데이터 넣기 📋

임시 텍스트만 있으면 밋밋하니까 실제 상품 정보를 넣어봅시다!

props로 데이터 전달하기

App.js:

<Route path="/detail" element={ <Detail shoes={shoes}/> }/>

Detail.js:

<div className="container">
  <div className="row">
    <div className="col-md-6">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
    </div>
    <div className="col-md-6 mt-4">
      <h4 className="pt-5">{props.shoes[0].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}원</p>
      <button className="btn btn-danger">주문하기</button>
    </div>
  </div> 
</div>

props 사용 이유:

• Detail.js에서 shoes state를 또 만들면 나중에 두 군데 수정해야 해서 비효율적
• 데이터 일관성 유지를 위해 props 사용 권장 ⚠️

상세페이지 여러 개 만들기 🔢

비효율적인 방법

<Route path="/detail/0" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/1" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/2" element={ <Detail shoes={shoes}/> }/>

문제점: 상품이 100만 개라면 Route도 100만 개 만들어야 함 😱

URL 파라미터 사용하기 (권장)

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

URL 파라미터 문법

• /:id - "아무 문자"를 의미
• /detail/아무거나 입력 시 <Detail> 컴포넌트 표시
• 슬래시(/)는 단어 간 띄어쓰기용으로 사용

이제 다음 URL들이 모두 작동합니다:

• /detail/0
• /detail/1
• /detail/2

useParams로 URL 파라미터 가져오기 🎣

페이지마다 다른 상품을 보여주려면 현재 URL의 파라미터 값을 가져와야 합니다.

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

function Detail(props){
  let {id} = useParams();
  console.log(id)  // URL의 :id 부분 값 출력
  
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  )
}

useParams 작동 원리

• /detail/1 접속 → id 변수에 "1" 저장
• /detail/2 접속 → id 변수에 "2" 저장
• props.shoes[id].title로 해당 상품명 표시

다중 URL 파라미터

// path 설정
<Route path="/detail/:category/:id" element={<Detail />} />

// useParams 사용
let {category, id} = useParams();
// /detail/shoes/1 → category="shoes", id="1"

응용 문제: 데이터 정렬 시 발생하는 문제 🤔

문제 상황

상품을 가나다순으로 정렬하는 버튼을 만들었다고 가정:

1. 정렬 전: White and Black이 0번 상품
2. 정렬 후: Grey Yordan이 0번 상품이 됨
3. 결과: /detail/0 접속 시 다른 상품이 보임!

해결 방법 힌트 💡

배열 인덱스 대신 고유한 식별자(id)를 사용해야 합니다!

---

보충 설명 💡

URL 파라미터 vs 쿼리 스트링 🔍

URL 파라미터 (Path Parameter):

/detail/123          ← 123은 URL 파라미터
/user/john/posts/5   ← john과 5는 URL 파라미터

쿼리 스트링 (Query String):

/products?category=shoes&size=large
/search?q=react&page=2

useParams vs useSearchParams 비교

1. useParams - URL 파라미터용

// URL: /product/123
const { id } = useParams();
console.log(id); // "123"

2. useSearchParams - 쿼리 스트링용

// URL: /products?category=shoes&page=2
const [searchParams] = useSearchParams();
console.log(searchParams.get('category')); // "shoes"
console.log(searchParams.get('page')); // "2"

안전한 상세페이지 구현 🛡️

1. ID 기반 검색 방식

function Detail(props) {
  const { id } = useParams();
  
  // 인덱스 대신 ID로 찾기
  const product = props.shoes.find(shoe => shoe.id === parseInt(id));
  
  if (!product) {
    return <div>상품을 찾을 수 없습니다.</div>;
  }
  
  return (
    <div>
      <h4>{product.title}</h4>
      <p>{product.content}</p>
      <p>{product.price}원</p>
    </div>
  );
}

2. 에러 처리 강화

function Detail(props) {
  const { id } = useParams();
  const navigate = useNavigate();
  
  useEffect(() => {
    // 유효하지 않은 ID면 404로 리다이렉트
    const product = props.shoes.find(shoe => shoe.id === parseInt(id));
    if (!product) {
      navigate('/404', { replace: true });
    }
  }, [id, props.shoes, navigate]);
  
  // ... 컴포넌트 렌더링
}

동적 라우팅 고급 패턴 🎯

1. 옵셔널 파라미터

// 카테고리가 있을 수도 없을 수도
<Route path="/products/:category?" element={<Products />} />

function Products() {
  const { category } = useParams();
  
  // category가 undefined일 수 있음
  return category ? (
    <div>{category} 카테고리 상품들</div>
  ) : (
    <div>전체 상품</div>
  );
}

2. 와일드카드와 파라미터 조합

<Route path="/files/*" element={<FileViewer />} />

function FileViewer() {
  const location = useLocation();
  const filePath = location.pathname.replace('/files/', '');
  
  // /files/docs/readme.txt → filePath = "docs/readme.txt"
}

성능 최적화 팁 ⚡

1. 메모이제이션 활용

function Detail(props) {
  const { id } = useParams();
  
  const product = useMemo(() => {
    return props.shoes.find(shoe => shoe.id === parseInt(id));
  }, [props.shoes, id]);
  
  return product ? <ProductView product={product} /> : <NotFound />;
}

2. 데이터 사전 로딩

// 상품 목록에서 상세페이지로 이동하는 링크
function ProductCard({ product }) {
  const handleMouseEnter = () => {
    // 마우스 호버 시 상세 데이터 미리 로드
    preloadProductDetails(product.id);
  };
  
  return (
    <Link 
      to={`/detail/${product.id}`}
      onMouseEnter={handleMouseEnter}
    >
      {product.title}
    </Link>
  );
}

URL 설계 베스트 프랙티스 📐

1. 직관적인 URL 구조

✅ 좋은 예:
/products/123
/categories/electronics/products/456
/users/john/orders/789

❌ 나쁜 예:
/page?type=product&id=123
/electronics123
/johnorders789

2. RESTful URL 패턴

// 상품 관련
/products           // 상품 목록
/products/123       // 상품 상세
/products/new       // 상품 추가
/products/123/edit  // 상품 수정

// 사용자 관련  
/users/456          // 사용자 프로필
/users/456/orders   // 사용자 주문 목록
/users/456/orders/789  // 특정 주문 상세