React router -3 URL Parameter

상품 상세페이지에 상품명 넣어보기

shoes는 App 컴포넌트에 있으니 App -> Detail로 데이터를 props로 아래와 같이 전송한다.

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

페이지를 여러개 만들고 싶으면 URL 파라미터 문법을 사용한다.
path 작명할 시 path="/:작명"

아래와 같이 페이지마다 다른 상품내용을 보여주려면
/detail/0
/detail/1
/detail/2

useParams() 라는 함수를 상단에서 import 해오면 쓸 수 있다.
현재 /:url파라미터 자리에 유저가 입력한 값을 가져올 수 있다.
변수에 저장해서 쓰면 된다.

shoes는 아래 data.js를 state에 담은 것이다.
해당 배열을 자바스크립트 find() 메소드를 통해 id가 일치하는 값을 찾아
페이지마다 각각 다른 상품명과 이미지가 보이게 적용했다.

find()는 array 뒤에 붙일 수 있으며 return에 조건식을 적으면 조건식에 맞는 자료를 남겨준다.

find() 콜백함수에 파라미터를 넣으면 array자료에 있던 자료를 뜻한다.
아래에선 findProduct로 작명했다.

findProduct.id == id 라는 조건식을 작성해 array자료.id == url에입력한번호 일 경우 결과를 변수에 담아준다.

(Detail.jsx)

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

function Detail(props) {
  const {id} = useParams();
  const findProduct = props.shoes.find((element) =>
      element.id == id
  )
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={`https://codingapple1.github.io/shop/shoes${findProduct.id+1}.jpg`} width="100%" />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{findProduct.title}</h4>
          <p>{findProduct.content}</p>
          <p>{findProduct.price}</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
    </div> 
  )
}

export default Detail

(data.js)

[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },
  {둘째상품},
  {셋째상품}
] 

해당 방식으로 상세페이지가 몇백개가 있어도 쉽게 작업이 가능하다.