React - path parameter / TIL - 9

PathParameter

• url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 합니다.

localhost:3000/product/2 //2가 pathParameter
localhost:3000/product/3 //3가 pathParameter
localhost:3000/product/4 //4가 pathParameter
localhost:3000/product/5 //5가 pathParameter

리액트에서 pathparameter를 쓰는 예
<BrowserRouter>
  <Routes>
    <Route path='/product/:id' element={<ProductDetail />} />
  </Routes>
</BrowserRouter>

: 는 Path Parameter 가 올 것이다.
id 는 해당 Path Parameter 의 이름을 의미하고 임의의 이름 지정 가능

PathParameter Cycle

useNavigate 를 통해 페이지를 이동하는 훅을 사용하고 이 훅을 onClick 이벤트 내부에 적용

onClick 이벤트시 발생하는 navigate 함수를 통해 /product/1 로 이동

URL 이 /product/1 로 변하면, Router 컴포넌트에 정의되어 있는 path='/product/:id' 에 따라, ProductDetail 컴포넌트가 마운트

ProductDetail 컴포넌트에서는 백엔드에 id 가 1 인 아이템에 대한 정보를 요청 request

응답으로 받은 정보를 함수를 통해 변수의 어딘가에 저장하고, 이를 통해 상세 페이지 UI 가 그려짐.

요청한 정보를 컴포넌트에서는 어떻게 가져올까?

useNavigate()

function Product(props) {
  const navigate = useNavigate();

  const goToDetail = () => {
    navigate(`/product/${props.id}`);
  }
  
  return (
    <div className="productContainer" onClick={goToDetail}>
	...
    </div>
  )
}

해석

useNavigate 훅을 실행하면 페이지를 이동시키는(url을 변경시키는) 함수를 반환

해당 함수를 navigate 라는 변수에 할당

따라서, navigate()와 같은 방식으로 함수를 호출할 수 있습니다.

navigate() 함수의 인자에 이동하고자 하는 url(ex. /products)을 전달하면

최종적으로 해당 url로 화면을 이동

useLocation() - 내가 어디있는지 알고 싶을때

function ProductDetail(props) {
  const location = useLocation();
  console.log(location);
  
  return (
    ...
  )
}

useLocation 훅을 실행하면 경로 정보를 담고 있는 객체를 반환 

해당 객체를 location 이라는 변수에 할당 

location 변수를 콘솔로 출력해 보면

{
  pathname: '/product/1', //현재 경로의 값
  search: '', // 현재 경로의 query parmeter 값
  hash: '', 
  state: null, 
  key: 'default'
}

useParams Hook 나는 패스파라미터를 변수에 담고싶어

useParams 훅은 다음과 같이 사용합니다.

// 현재경로: /product/1

function ProductDetail(props) {
  const params = useParams();
  
  console.log(params);

  return (
    ...
  )
}

useParams 훅을 실행하면 path parameter 정보를 담고 있는 객체 를 반환

해당 객체를 params 라는 변수에 할당 

params 변수를 콘솔로 출력해 보면 

{id: 1} = :id의 값

<BrowserRouter>
  <Routes>
    <Route path='/product/:id' element={<ProductDetail />} />
  </Routes>
</BrowserRouter>

useNavigate : url 를 변경하는 함수 를 반환

useLocation : 현재 경로 정보를 담고 있는 객체를 반환

useParams : Router 에 등록해준 path parameter 정보를 담고 있는 객체를 반환