19.4 리액트 라우터가 있는 SPA 다중 페이지 구축하기: Params 사용하여 동적 경로 추가하기(feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

useParams로 동적 매개변수 추출

params 를 사용하기전 app에서 선 작업을 해준다.

 

App.js 에서 Route 를 설정한 라인 중 어느 한 코드를 확인 해보자.

<Route path="/product-detail">
  <ProductDetail />
</Route>

path 에서 콜론을 사용하고 params 의 개채의 키로 식별자를 넣어준다.

식별자는 productId

<Route path="/product-detail/:productId">
  <ProductDetail />
</Route>

 

이제 useParams를 사용할 준비가 되었다.

 

ProductDetail.js 를 pages 폴더에서 생성해주자.

그리고 react-route-dom 에서 useParams를 가져와 아래와 같이 사용해본다.

// ProductDetail.js

import { useParams } from "react-router-dom";

const ProductDetail = () => {
  const params = useParams(); // params를 상수에 할당

  console.log(params.productId); // params 출력해보기

  return (
    <section>
      <h1>Product Detail</h1>
      <p>{params.productId}</p> // 동적인 변화 p태그로 확인
    </section>
  );
};

export default ProductDetail;

 

이제 브라우저에서 http://localhost:3000/product-detail/하이 를 입력해보자.

http://localhost:3000/product-detail/이게 유저 파람스

이제 params 를 사용하여 동적인 경로를 추가할 수 있게 되었다.