useParams

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 ( {selectedShoes.title} {selectedShoes.content} {selectedShoes.price} 주문하기 ) } export default Detail; find()를 사용하여 유저가 입력한 url파라미터와 상품 id가 ..

React : URL 파라미터 (useParams)

URL 파라미터 상세페이지가 데이터에 따라 수백개가 필요한 상황이 생길 수 있다. 이 경우에 URL 파라미터를 사용하면 된다. 부모페이지 path 작명에서 '/:작명'을 입력하면 아무 문자를 뜻한다. 주소창에 /detail/작명 입력했을 때 컴포넌트를 보여달라는 것이다. 자식(연결)페이지 import { useParams } from 'react-router-dom' function Detail(){ let {id} = useParams(); return (