상품관리 Part 3 상품 상세페이지

상품의 상세페이지를 구현하는 방법 기록

---

상품 상세페이지는 사용자가 특정 상품을 클릭했을 때 해당 상품에 대한 자세한 정보를 보여주는 페이지입니다.

 

 

1. React Router 설정

Route 컴포넌트는 React Router 라이브러리에서 제공하는 컴포넌트로, URL 경로와 해당 경로가 매칭될 때 렌더링할 컴포넌트를 지정합니다.

 

 

2. ProductDetailView 경로 설정

 ProductDetailView 컴포넌트를 특정 상품의 상세 페이지로 연결하는 설정

<Route path="/product/:id" element={<ProductDetailView />} />

 

2-1 Route 컴포넌트

Route 컴포넌트는 경로(path)와 해당 경로에 매칭될 때 렌더링할 컴포넌트(element)를 정의합니다.

 

2-2 path 속성

path 속성은 URL 경로를 정의합니다.

여기서 "/product/:id"는 동적 세그먼트를 포함한 경로입니다. 동적 세그먼트는 콜론(:)으로 시작하며, 실제 경로의 일부로 치환됩니다.

/product/:id

• :id 부분은 동적 세그먼트로, 여러 값으로 대체될 수 있습니다
• 예를 들어, "/product/1", "/product/2" 등과 같이 다양한 상품 ID에 해당하는 경로로 치환됩니다

2-3 element 속성

element 속성은 해당 경로가 매칭될 때 렌더링할 컴포넌트를 정의합니다. 여기서는 ProductDetailView 컴포넌트를 지정했습니다.

 

 

3. ProductDetailView 컴포넌트에서 동적 세그먼트 사용

이제 ProductDetailView 컴포넌트에서 동적 세그먼트로 전달된 id를 사용하는 방법을 살펴보겠습니다.

 

3-1  useParams 훅 사용

React Router는 useParams 훅을 제공하여 URL 파라미터를 쉽게 접근할 수 있도록 도와줍니다.

import { useParams } from "react-router-dom";

const ProductDetailView = () => {
  const { id } = useParams();
  // id를 이용하여 해당 상품의 상세 정보를 가져옵니다.
};

useParams 훅을 사용하면 URL 경로에 포함된 동적 세그먼트 값을 쉽게 가져올 수 있습니다. 

여기서는 id를 가져와서 해당 상품의 상세 정보를 조회하는 데 사용합니다.

 

 

4. ProductDetailView 컴포넌트 구현

이제 ProductDetailView 컴포넌트 전체 코드를 동적 세그먼트를 포함하여 구현해보겠습니다.

import React, { useEffect } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { fetchProducts } from "@/store/product";

const ProductDetailSectionBlock = styled.div`
//스타일 생략
`;

const ProductDetailView = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const products = useSelector((state) => state.products.products);
  const product = products.find((product) => product.id.toString() === id);

  useEffect(() => {
    if (!products.length) {
      dispatch(fetchProducts());
    }
  }, [dispatch, products.length]);

  if (!product) return <p>Loading...</p>;

  return (
    <ProductDetailSectionBlock className="row">
      <h2 style={{ color: "#333", marginBottom: "20px", fontSize: "30px" }}>
        {product.name}
      </h2>
      <div className="content">
        <div className="info">
          <p>가격 : {product.price.toLocaleString()}&yen;</p>
          <p>
            <span dangerouslySetInnerHTML={{ __html: product.description }} />
          </p>
        </div>
      </div>
    </ProductDetailSectionBlock>
  );
};

export default ProductDetailView;

 

---

 

요약

1. Route 설정: path에 동적 세그먼트를 사용하여 다양한 경로를 하나의 컴포넌트에 매핑할 수 있습니다.
2. useParams 훅 사용: 동적 세그먼트를 useParams 훅으로 가져와 컴포넌트에서 사용할 수 있습니다.
3. ProductDetailView 컴포넌트: URL에서 가져온 id를 사용하여 해당 상품의 상세 정보를 보여줍니다.

 

이렇게 하면 사용자가 상품 목록에서 특정 상품을 클릭했을 때 해당 상품의 상세 정보를 보여주는 페이지를 쉽게 구현할 수 있습니다.