React - useParams()

Moolbum·2021년 12월 19일
2

React

목록 보기
8/23
post-thumbnail

동적라우팅

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

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


useParams()

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

  1. router.js 에 id값을 지정해준다.
router.js
<Route path="/detail/:id" element={<ProductDetail />} />
  1. useParams hook 지정 해주기
detail.js
import { useParams } from 'react-router-dom';
  1. 컴포넌트 내 useParmas() 선언
const Detail = props => {
  const params = useParams();
  
  return(
	<div>상세페이지</div>
  )
}
  1. fetch 함수에서 useParams를 선언했던 변수입력
const Detail = props => {
  const params = useParams();
  
  useEffect(() => {
    fetch(`${API}/${params.id}`)
      .then(res => res.json())
      .then(data => {
        setCommentArray(data);
      });
  }, []);
  
  return(
	<div>상세페이지</div>
  )
}

profile
Junior Front-End Developer 👨‍💻

0개의 댓글