[REACT-Shop-PJT] 리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기

상세페이지에 상품명을 넣어보자

현재 임시 문구가 나와있는데,

 

shoes 라는 state에 있던 상품정보들을 Detail 컴포넌트에 넣어보자

근데 shoes는 App 컴포넌트에 있으니 App -> Detail 이렇게 전송하면 쓸 수 있다

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

props를 전송하고

 

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">
          <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>

  )
}

export default Detail;

Detail 컴포넌트는 props 파라미터 등록해서 shoes를 자유롭게 사용했다

props.shoes[0].title 하면 0번째 상품명이 나온다.

 

 

Q. 그런데 shoes 라는 state를 Detail.js 안에서 또 만들면 굳이 props가 필요없지 않나요?

A. 나중에 수정이 필요하면 두군데 수정해야해서 귀찮으니 그러면 안됩니다.

 

 

상세페이지 여러개 만드려면?

방금 만든건 0번 상품의 상세페이지일 뿐이다.

상품이 3개면 3개의 페이지가 필요하다

<Route> 쓰면 1개의 페이지를 만들 수 있으니, 

        <Route path='/detail/0' element={ <Detail shoes={shoes} /> } />
        <Route path='/detail/1' element={ <Detail shoes={shoes} /> } />
        <Route path='/detail/2' element={ <Detail shoes={shoes} /> } />

라우트를 3개를 만들면 3개의 페이지를 만들 수 있다

path 작명시 슬래시 기호도 마음대로 사용하능한데 단어간 띄어쓰기용으로 많이 사용한다.

 

근데 상품이 100만개라면 라우터도 100만개를 만들 수 없으니, 다른 방법을 사용하자

 

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

URL 파라미터라는 문법을 사용하면 되는데,

path 작명할 때 /:어쩌고 이렇게 사용하면 "아무 문자" 를 뜻한다

그래서 위의 <Route>는 누군가 주소창에 /detail/아무거나 입력했을 때

<Detail> 컴포넌트를 보여달라는 뜻이다.

 

이제 

/detail/0

/detail/1

/detail/2

이렇게 접속해도 <Detail> 컴포넌트 잘 보여줄 수 있다.

 

 

페이지마다 똑같은 내용을 보여주기 싫으면?

페이지는 여러개지만 다 똑같은 0번째 상품만 보여주고있는 상황을 해결해보자

 

useParams() 라는 함수를 상단에서 import 해오면 쓸 수 있는데

이걸 쓰면 현재 /:url 파라미터 자리에 유저가 입력한 값을 가져올 수 있다

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

function Detail(props) {

  let {id} = useParams()
  console.log(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">{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>

  )
}

export default Detail;

 

그래서 위처럼 사용하면

누가 /detail/1로 접속하면 id라는 변수에 1이 들어오고,

누가 /detail/2로 접속하면 id라는 변수에 2가 들어온다.

 

그래서 props.shoes[id].title 이러면 아까 의도했던 기능이 완성.  

페이지마다 각각 다른 상품명이 보인다.

 

---

 

출처 : 코딩애플 react 강의