React - useParams()

동적라우팅

똑같은 레이아웃의 상세페이지 100개를 제작해야 한다면?
어떤 행동을 할 것인가? 설마.... 100개를 만들것인가?

절대 NOOOOOOOOOOOOOO !!!!!!!
동적라우팅을 사용하면 하나의 상세페이지 만으로 가능하다!

useParams()

useParams 훅을 이용해 동적 라우팅 하는방법

1. router.js 에 id값을 지정해준다.

router.js
<Route path="/detail/:id" element={<ProductDetail />} />

2. useParams hook 지정 해주기

detail.js
import { useParams } from 'react-router-dom';

3. 컴포넌트 내 useParmas() 선언

const Detail = props => {
  const params = useParams();
  
  return(
	<div>상세페이지</div>
  )
}

4. fetch 함수에서 useParams를 선언했던 변수입력

const Detail = props => {
  const params = useParams();
  
  useEffect(() => {
    fetch(`${API}/${params.id}`)
      .then(res => res.json())
      .then(data => {
        setCommentArray(data);
      });
  }, []);
  
  return(
	<div>상세페이지</div>
  )
}