동적 라우팅

<Link key={el.id} to={`/ProductDetail/${el.prdname}`}>

동적 라우팅이란 몇개가 될지 모르는 페이지 개수에 각각 url 을 걸어줄 수 없을때 불러오는 데이터 값의 key값을 url로 만들어 주는 것이다.

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

라우터에 위와같이 패스 명을 걸어준 후 /:id를 넣어준다

{data.map(el => (
        <div className="prdBox" key={el.id}>
          <Link key={el.id} to={`/ProductDetail/${el.prdname}`}>
            <img alt="prdimage" src={el.image}
            className="prdImage" />
            <div className="contentBox">
              <div className="nowState">{el.prdname}</div>
              <div className="prdName">{el.discription}</div>
              <div className="color">{el.color}</div>
              <div className="price">{el.price}</div>
            </div>
          </Link>
        </div>
      ))}

그 후에는 map함수를 사용하는 입력되는 데이터에 따라 개수가 정해지는 곳에 {data.map(el => ( <Link key={el.id} to={/ProductDetail/${el.prdname}}>)}
를 넣어준다

저렇게 만들어주면 그 섹션의 상세 페이지로 이동하는 경로를 자동으로 가지고 있게되는데
/ProductDetail/${el.prdname} 이게 섹션상세페이지의 주소가 된다.
뒤의 el.prdname은 받아오는 데이터 객체의 상품명이기때문에
url에 다른 정보를 넣고 싶으면 el.id 혹은 el.price 등 객체 내에있는 키값중 아무거나 지금 어떤 페이지에 있음을 나타낼 수 있는 정보를 넣으면 될 것 같다.
자주 쓰게 될것같은 기능이기때문에 이번 프로젝트를 통해 확실히 알수있어서 다행이다.