[React] : URL 파라미터 (페이지 여러개 만들때) , useParams()

페이지 여러개 만들고 싶으면 :URL파라미터 사용

/detail/:id

🎤

/detail/아무거나 라는뜻

→ /detail/아무거나에 접속하면 이 페이지 보여주세요~

ex) /detail/0으로 접속하면 0번상품

/detail/1로 접속하면 1번상품 나오도록

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

Q. 페이지는 여러개인데 보이는 내용이 똑같아요

• 각각 다른 컴포넌트를 100만개 만들든가 (하지마!)
• 하나의 컴포넌트로 각각 다른 내용을 보여주든가

→ props 활용하면 컴포넌트 하나로 각각 다른 내용 가능

{props.shoes[현재url에입력한숫자].title}

{props.shoes[0].title}
{props.shoes[0].content}
{props.shoes[0].price}

{props.shoes[1].title}
{props.shoes[1].content}
{props.shoes[1].price}

⇒ useParams 사용!!

Q. URL 파라미터에 이상한거 입력하면?

→ if 조건문으로 해결

→ id라는 변수가 이상하면 상품없다는 UI 보여주자

useParams() : 유저가 URL파라미터에 입력한거 가져오기

💡 유저가 URL파라미터에 입력한거 가져오기

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

→ 유저가 :id 자리에 적은거 가져와줌

1. URL 파라미터를 변수에 저장

let {id} = useParams();

1. 변수를 대입해줌

<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}원</p>

URL 파라미터 만들 때 여러개 가능!

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

Q. 자료의 순서가 변경되면(상품이 정렬되면) 상세페이지도 고장나는 문제는 어떻게 해결하나?

→ /detail/0 접속시 0번째 상품 말고 상품 id가 0인걸 보여주려면

→ 현재 url에 입력한 번호와 같은 번호를 가진 상품을 찾아서 데이터바인딩해주세요

array자료.find(()⇒{return 조건식})

1. find()는 array 뒤에 붙일 수 있으며 return 조건식 적음

→ 조건식에 맞는 자료를 남겨줌

1. find() 콜백함수에 파라미터를 넣으면 array자료에 있던 자료를 의미함(x라고 작명)
2. x.id == id 조건식

→ array자료.id == url에 입력한번호 일 경우 결과를 변수에 담아줌

→ {상품1개} 가 남음

let 찾은상품 = props.shoes.find(function(x) {
    return x.id == id
  });

1. {상품1개}를 html에 데이터바인딩

{찾은상품.title}

• 원래 코드

let 찾은상품 = props.shoes.find(function(x) {
    return x.id == id
  });

• 더 짧게 쓰고 싶을 때

let 찾은상품 = props.shoes.find**((x)=>x.id == id)**

→ arrow function에서 return과 중괄호는 동시에 생략 가능!!

전체코드

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;