[React] useParms 상세페이지 라우팅

💡UseParms란?

react-router-dom에서 제공하는 Hook의 요소로서, url의 동적인 파라미터 정보를 가져 올 수 있다.
예를들면 쇼핑몰사이트에서 각 item들을 클릭시 나오는 디테일페이지들을 정적으로 하나하나 만드는게 아닌, Detail-page의 레이아웃 하나에 useParams훅을 사용하여 상품 고유의 id로 데이터를 뽑아와 동적으로 API통신을 가능하게 한다.
이때, http://www.상품주소/detail/1,2,3 ...
이런식으로 해당상품의 id주소로 전달받고 화면에 띄우게된다.

📌목표

sub-page에 있는 item들을 클릭시 해당 item의 디테일 동적 url 경로를 useParams를 이용하서 생성 한뒤, useNavigate를 사용하여 sub-page의 item들 클릭시 해당 피라미터로 이동!

폴더구조

---layout
-----sub
-----Deatail

---routes
----productlist

APP.JS

동적인 id의 정보가 담긴 object를 담기위해 useParams의 변수 item_id를 만들어 준다.
데이터 변수들도 디테일페이지로 props값을 전달하기위해 useState에 넣어 내려준다.

import { useParams } from 'react-router-dom';
import data from './data/data.json';

const {item_id} = useParams();
const [items,SetItems] = useState(data);

해당 object가 담긴 위치로 이동하기 때문에 경로(path)에 위치경로를 지정해준다.
데이터의 값이 담긴 값도 props전달한다.

 <Route
         path="/Detail/:item_id"
         element={<DetailPage items={items} />}
                ></Route>

Detail.js

• App.js에서 지정한 useParams를 똑같은 변수명(item_id) 로 지정해준다.
• 데이터 props를 전달 받아온다.
• []속에 useParams의 URL 파라미터의 값으로 지정한 변수명을 넣어 고유의 값으로 인식하게 한다.

      export default function DetailPage(props) {
      
      const { item_id } = useParams();
      
      	 <div className="item-title">
              <strong>{props.items[item_id].title}</strong>
         </div>
      
      }

Sub.js

• 해당 item들을 클릭시 url 피라미터 값으로 이동하기위해 useNavigater hook을 이용하여 구현하고자 한다.

  💡UseHistory

  React v6에서 삭제된 Hook으로 , Detail-page에서 이를이용하여 페이징간의 기록을 관리하여 useParams와 같이 사용되곤했다.
  대신, 페이징간의 이동을 처리하는 hook으로 useNavigate hook을 사용하여 이를 처리할 수 있다.

• navagate를 import 해온뒤 item 클릭 핸들러를 작성한다.

• useParams에 지정해둔 변수의 값과 같은 값으로 navigate속에 동적경로를 적어준다.
  handleDetailClick 함수를 호출할때 전달되는 값을 뜻한다.

• onclick 이벤트를 발생시켜 handleDetailClick 속에 해당 상품의 고유 식별자 id값을 넣어준다.

export default function SubPage() {
    const navigate = useNavigate();

    const handleDetailClick = (itemId) => {
        navigate(`/Detail/${itemId}`);
   };
   
    {data.map((item) => (
           <li
              key={item.id}
              onClick={() => handleDetailClick(item.id)}
             />
            )
      }}
 // ❗❗임시로 데이터 불러온것, 추후 api 통신 방법으로 데이터를 불러온후 
  추후 코드 수정예정 
    

📚총정리

handleDetail함수가 호출될때 item.id가 item_id로 값이 전달 된다.
이때, item_id는 고유 url 주소를 뜻하며, item.id는 각 데이터들의 id이므로
데이터의 id들이 고유한 파라미터로 url에 나타나게된다.

++수정사항

1. item의 id는 `1,2,3, ...'순으로 배열이 만들어져 있다.
   하지만 item클릭시 디테일페이지에서 url의 숫자는 제대로 들어왔으나 로딩되는 정보는 그다음 item으로, id+1되는 정보들이 로딩 되었다.

2. 마지막 데이터는 에러가 발생