동적 라우팅, useParams 후크

//Router.js

<Route path="/ProductList" element={<ProductList />} />
<Route path="/ProductDetail/:id" element={<ProductDetail />} />

react-router-dom에서 동적 라우팅을 구현하는 방법은 Route 구성 요소의 경로 소품에 있습니다.

: 팻말을 쓰는 것입니다.

경로/:문자열 양식에 경로를 설정하면 URL에서 경로/ 뒤에 오는 문자가 경로에 연결됩니다.

경로 매개변수 개념

경로/:문자열 여기서 문자열은 경로 매개변수에 해당합니다.

경로 매개변수를 활용하면 동적 라우팅을 구현하면서 다양한 UI를 표시할 수 있습니다.

useParams 후크 개념

useParams 후크는 react-router-dom에 내장된 후크입니다.

이를 통해 경로 매개변수의 값을 쉽게 얻을 수 있으며 상태와 마찬가지로 경로 매개변수의 값이 변경될 때 컴포넌트를 다시 렌더링하는 기능을 제공합니다.

useParams 후크를 호출하면 객체 형식으로 경로 매개변수 값이 반환됩니다.

이때 객체 속성의 키는 라우트에 설정된 경로 매개변수의 이름이고, 값은 실제로 경로 매개변수에 전달되는 값이다.

예 useParams

// list

<div key={productId} className="goodListItem">
                <div className="images">
                  <img
                    className="rendingImage"
                    src={productImage(0)}
                    alt="rendingImage"
                    onClick={() => {
                      navigate(`/productDetail/${productId}`);
                    }}
                  />

//detail

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

const params = useParams();

const goodsId = params.id;

const (productPrice, setProductPrice) = useState({});

useEffect(() => {
    fetch(`http://ip주소:3000/products/${goodsId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
    })
      .then(res => res.json())
      .then(result => setProductPrice(result));
  }, (goodsId)); // goodsId가 바뀔때마다 재렌더링시킵니다.