React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())

가나다정렬되어도 끄떡없는 상세페이지 불러오기

조건

배열의 순서가 변경되기 전과 후가 같은 상품으로 이동되도록 만든다.

---

풀이

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

function Detail(props){
  let {id} = useParams();
  let selectedShoes = props.shoes.find(function(shoe){
    return shoe.id === parseInt(id);
  })
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
        <img src={`${process.env.PUBLIC_URL}/shoes${selectedShoes.id + 1}.jpg`} width="100%" />
        </div>
        <div className="col-md-6">
        <h4 className="pt-5">{selectedShoes.title}</h4>
        <p>{selectedShoes.content}</p>
        <p>{selectedShoes.price}</p>
        <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
    </div> 
  )
}

export default Detail;

find()를 사용하여 유저가 입력한 url파라미터와 상품 id가 같은 상품을 불러오도록 했다.

---

출처 : 코딩애플 https://codingapple.com/