React - 쇼핑몰만들기 (6)

구현하는 기능과 배우는 컨셉

✔ <Detail> 컴포넌트에 데이터바인딩하기
✔ URL 파라미터로 상세페이지 3개 제작하기
✔ useParams
✔ Url Parameter

👉 <Detail> 컴포넌트에 데이터바인딩하기

App.js
  <Route path="/detail/:id">
          <Detail shoes={shoes} />
        </Route>
Detail.js       
function Detail(props) {
return (
    <div className="container">
     -------
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[0].title}</h4>
          <p>{props.shoes[0].content}</p>
          <p>{props.shoes[0].price}</p>
   -----------
    </div>
  );

◾ 상위컴포넌트가 중요 데이터를 가지고 있어야 관리하기 편함
◾ state 만들땐 state를 필요로하는 컴포넌트들 중 가장 최상위 컴포넌트에 보관
◾ Detail 컴포넌트에 shoes라는 props 생성해서 Detail.js에서 사용할 수 있도록한다.

👉 URL 파라미터로 상세페이지 3개 제작하기

(App.js 파일)

function App(){
  return (
    <div>
      <나머지HTML/>
        <Route path="/detail/0">
          <Detail shoes={shoes}/>
        </Route>
        <Route path="/detail/1">
          <Detail shoes={shoes}/>
        </Route>
        <Route path="/detail/2">
          <Detail shoes={shoes}/>
        </Route>
    </div>
  )
}

◾ 상세페이지를 3개만들려면
◾ /detail/0으로 접속하면 0번째 상품의 상세페이지
◾ /detail/1으로 접속하면 1번째 상품의 상세페이지
◾ /detail/2으로 접속하면 2번째 상품의 상세페이지
◾ 이런식으로 3개의 페이지를 만들면 되지만 반복되므로 좋은 코딩은아니다.
◾ 이때 필요한 게 URL파라미터 문법을 이용해 축약을 시킨다.

(App.js 파일)
function App(){
  return (
    <div>
      <나머지HTML/>
        <Route path="/detail/:id">
          <Detail shoes={shoes}/>
        </Route>
    </div>
  )
}
}

◾ :id 자리에 아무 문자를 입력하면 <Dtail>컴포넌트를 보여달라는 의미이다
◾ 예를들어, /detail/1111 처럼 아무거나 입력해도 <Detail>컴포넌트를 보여준다
◾ id라는 부분은 함수 파라미터처럼 자유롭게 작명한다
◾ 파라미터는 몇개든 추가할 수 있다.
◾ /detail/:id/:name이런 식도 가능하다

👉 useParams

import {useHistory, useParams} from 'react-router-dom';

function Detail(props) {
  let {id} = useParams();
  
  return (
    <div className="container">
          ---------
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}</p>

◾ 각각 URL 접속시 상품명,내용,가격등을 다르게 보여줘야함
◾ 즉, data안에 있는 id,title등을 쓰고싶을때 필요한게 useParams()라는 훅
◾ useParams()라는 훅은 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장해주는 함수이다.
◾ 아까 URL에 적은 파라미터 id를 불러와서 변수{id}에 저장해준다.
◾ detail/1로 접속하면 id라는 변수는 1이 되고
/detail/100 으로 접속하면 id라는 변수는 이제 100이 된다.

◾👉 Data ID를 활용하자.

  let searchItem = props.shoes.find((item) => {
    return item.id == id;
  });
  <h4 className="pt-5">{searchItem.title}</h4>
          <p>{searchItem.content}</p>
          <p>{searchItem.price}</p>

◾ data안에 있는 변하지않는 고유 id를 사용하는 것은 높은가격순등 필터링해서 정렬을할때 배열순서대로 정해놓으면 배열안에 순서가 변경되어 혼란이 일어날 수있다.
이때, 변경되지않는 고유 id를 사용하는 것이 바람직하다.
◾ /:id 여기 id위치에 영구번호인 상품데이터 id를 데이터 바인딩해준다.
◾ find함수는 Array 안에서 원하는 자료를 찾고 싶을때 사용
◾ find()는 array뒤에 붙일 수 있으며, 안에 콜백함수가 들어간다.
◾ 콜백함수 내의 파라미터는 array안에 있던 하나하나의 데이터를 의미한다.
◾ return 조건식 형식으로 작성하고, 이게 참인 데이터만 새로운 변수에 저장한다
◾ 위에코드에서는 URL의 /:id에 적힌 값과 상품 data의 id가 같은지 비교하고있다.
◾ 이를 사용하기위해 다시 HTML 부분에 데이터바인딩을 적용해준다.
◾ 실제 개발할땐 서버에 id: x 인 상품데이터를 Ajax로 요청하는 경우가 많다.
◾ ajax 요청을 성공하면 {}중괄호 안에 깔끔하게 상품데이터가 들어온다.