[React] 5. 상세페이지 만들기

상세 페이지에 props를 써서 데이터 바인딩을 해주었다

이때 굳이 props를 쓰지않고 Detail 컴포넌트에서 state를 만든뒤 써도 될거같다. 하지만 중요한 데이터들은 App 컴포넌트에 저장하는게 국룰!!!
그냥 중요한 데이터는 App 컴포넌트에 보관하자

이제 상세페이지를 3개 만듭시다
/detail/0 접속하면 0번째 상품
/detail/1 접속하면 1번째 상품
/detail/2 접속하면 2번째 상품 나오게 하기

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

/detail/:id -> 아무문자나 받겠다는 url 작명법 (url 파라미터)

//Detail.js
.
.
<div className="col-md-6 mt-4">
        <h4 className="pt-5">{shoes[0].title}</h4>
        <p>{shoes[0].content}</p>
        <p>{shoes[0].price} 원</p>
 		<button className="btn btn-danger">주문하기</button>
.
.
.

지금은 0번째 데이터만 뜨도록 하드코딩이 되어있지만 인덱스 값에 /:id 자리에 사용자가 입력한 값이 오면 좋을것 같다 이때 쓰는게
useParams!!!!

import { useHistory, useParams } from "react-router-dom";
.
.
let { id } = useParams();

먼저 import를 시켜준다, 컴포넌트 안에 useParams함수를 써서 변수를 선언해주기만 하면 끝!!!
이제 id에는 /:id 자리에 사용자가 입력한 값이 들어와있다!!! ㅈㄴ멋있다...

detail/2를 url에 작성하고 접속하면 실제로 2번째 상품의 상세정보가 뜬다

강의 도중 자료의 순서가 변경되면 상세페이지도 고장나는 문제가 발생한다. 이를 해결하려면 상품의 /:id자리에 입력한 값과 영구번호(id)가 같은 상품데이터를 찾아서 데이터 바인딩을 해주어야 한다

find()
1. array뒤에 붙일수 있으며 안에 콜백함수 들어감
2. 콜백함수 내의 파라미터: array안에 있는 하나하나의 데이터
3. return 값에는 조건식을 적을수 있는데 참인 데이터만 새로운 변수에 저장

 let { id } = useParams();
 let findItem = shoes.find((item) => {
    return item.id == id;
  });
.
.
.
<div className="col-md-6 mt-4">
	<h4 className="pt-5">{findItem.title}</h4>
    <p>{findItem.content}</p>
    <p>{findItem.price} 원</p>
 .
 .
 .

이제 detail/0,1,2..으로 접속시 id가 0,1,2..인 상품이 나올것이다

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)