#라우터(Routes, Route) : url 파라미터, useParams

1. 데이터에 맞게 상품의 정보를 보여주고 싶은데, 만약 상품이 100개 있다면..? 일일이 Route 를 써서 상세페이지를 만들어주기엔 한계가 있다.

데이터는 아래와 같다고 설정해보자.

각각 ID마다 상품명, 상세설명, 가격이 적혀있다.

let data = [
  { id : 0, title : "White and Black", content : "Born in France", price : 120000 },
  
  { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 },
  
  { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 }
]

 

2. 함수의 props에 상단의 데이터를 shoes라는 변수로 넣어주었다. shoes라는 데이터의 0번째, 1번째 부터 값을 넣어서 라우터를 만들면 일일이 만들어줘야하기때문에 아래의 코드는 범용성이 제한적인 코드이다. 그렇다면 저 아래의 '[0]'을 가변적으로 바꾸려면?

function Detail(props){
	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[0].title}</h4>
              <p>{props.shoes[0].content}</p>
              <p>{props.shoes[0].price}원</p>
              <button className="btn btn-danger">주문하기</button>
            </div>
          </div> 
        </div>
	)
}

 

3. useParams를 통해, url뒤의 파라미터 값을 가져와 데이터를 변경해서 보여줄 수 있다.

1) 먼저 useParams를 임포트해준다.

2) id라는 변수로 useParams를 지정해준다.

3) props의 인덱싱에 id값으로 넣어주면 끝.

4) 예를 들어 /detail/1 이렇게 유저가 url을 적으면 detail 뒤에 있는 '1' 값을 가져와 인덱싱에 넣어주게 되는 것.

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

function Detail(props){

	let id = useParams();

	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>
	)
}

App 함수에도 detail뒤에 ':id'를 넣어 수정해줘야 제대로 작동된다.

 

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

 

4. 하지만, 만약에 shoes라는 데이터 자체를 가나다 순으로 정렬해버리고 위의 방법대로 /detail/0 url을 입력하면 기존 데이터와 다른 순서대로 제품이 나오게된다. (==>원본 데이터를 정렬해버렸기 때문에) 그러면, url뒤의 파라미터와 데이터의 id가 동일한 식으로 상품을 정렬해 보이게 하려면 어떻게 해야할까?

 

1) let 찾은상품 을 변수로 두어서, find나 filter 함수를 활용해, 데이터를 가변하여 입력해주면 끝!

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

function Detail(props){
  
  let {id} = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == 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">
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
    </div> 
  )
}

export default Detail;