[리액트] 외부 페이지 데이터바인딩 / URL 파라미터 문법 / useParams()

 상세페이지(Detatil.js) 에 상품명 넣기

상품명 - shoes state = function App (App.js)에 존재. 

상세페이지(Detatil.js) 에 상품명 넣기.

= props 사용

// Detail.js

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">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}
export default Detail;

상품명 데이터 바인딩해주기.

///detail 접속시 html 이쁜거 보여달라
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;

props 쓸 때 중괄호 쓰고 쓰기.

---

페이지 여러개 생성 (URL 파라미터 문법)

:/ 의 사용

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

 /:어쩌구 이렇게 사용하면 "아무 문자"라는 뜻

 /detail/아무거나 입력했을 때 <Detail> 컴포넌트 보여달라는 뜻

 

path 작명시 url 파라미터는 몇번이고 사용가능

---

useParams() 사용

페이지마다 똑같은 내용은 보여주기 싫은 경우

 

다 똑같은 0번째 상품명만 보여주고 있는데

이렇게 보여주기 싫은 경우

///detail 접속시 html 이쁜거 보여달라
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.js 의

인덱스 0 때문에 하드코딩 돼서 0번째 상품만 보여지고 있음.

 

 /detail/0로 접속하면 0번째 상품

 /detail/1로 접속하면 1번째 상품

 /detail/2로 접속하면 2번째 상품 보여지게 하기

useParams() 사용 방법

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

상단에 import 해주기.

파라미터 자리에 입력한 데이터들이 남는다.

  let { id } = useParams();

라고 Detail.js 에 작성해줌.

= 유저가 id 자리에 적은 거 갖고와준다.

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

아까 App.js 에 작성한 id 라고 작명한

url 파라미터 데이터가 저 위치에 남음.

=  유저가 id 자리에 적은 거

/2 를 입력한 경우

  console.log(id);

진짜 인지 console 찍어서 확인 가능 

 props.shoes[id].title

이렇게 인덱스 0을 입력하지 않고

id 로 바꿔주면 하드코딩 하지 않고

 

 /detail/0로 접속하면 0번째 상품

 /detail/1로 접속하면 1번째 상품

 /detail/2로 접속하면 2번째 상품 보여지게 할 수있다.

---

App.js 에서

  <Nav.Link
              onClick={() => {
                navigate("/detail/0");
              }}
            >
              Detail
            </Nav.Link>

navigate 함수 경로를 바꿔줌.

상단 메뉴 Detail 클릭하면

그냥 바로 0 번째 파일 보여주게끔.

 

수정한 이유 >>>

= /detail 만 적용하면 에러가 뜬다.

useParams를 사용하여 id를 가져올 때,
URL에 id 파라미터가 없는 경우
undefined 를 반환하기 때문

따로 수정해줘야 하나 귀찮아서

그냥 경로만 바꿔줌.