오늘의 React

1. URL 파라미터로 상세페이지 만들기

- Function APP에서 detail 컴포넌트로 전송하려면

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

Q. detail 컴포넌트 안에 shoes라는 state를 만들면 되지 않을까?

A. 그러면 나중에 수정사항이 생길 때 두 곳을 수정해야하니 불편하다.

 

Q. detail 상품이 여러개라면 상세페이지 100개가 필요하다면?

A. :URL 파라미터를 써도 된다. (이렇게하면 상세페이지를 수백만개 만들 수 있다)

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

 

Q. 페이지는 여러개인데 보이는 내용이 똑같으면?

A. props를 활용하면 컴포넌트 1개로 각각 다른 내용이 가능하다.

<h4 className="pt-5">{props.shoes[현재url에 입력한 숫자].title}</h4>

• 유저가 URL파라미터에 입력한 거 가져오려면(useparams())을 사용하자.

Q. 상품의 영구번호가 0인 상품의 제목을 보여주세요.

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

function Detail(props) {

  let {id} = useParams();

  let product = props.shoes.find(item => item.id === parseInt(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">{product.title}</h4>
        <p>{product.content}</p>
        <p>{product.price}</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}