댓글 post

useParams()

The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>. Child routes inherit all params from their parent routes.

현재의 <Routh path>에 연결된 url에서 키와 값이 한 쌍인 유동적인 파라미터를 가진 객체를 반환. 자식 routes는 파라미터를 상속받는다.

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

파라미터와 쿼리

파라미터: /profiles/velopert
쿼리: /about?details=true

규칙은 없지만 일반적으로

• 파라미터는 특정 id나 이름을 가지고 조회를 할 때 사용
• 쿼리는 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용

useLocation()

반환 값 중 pathname 프로퍼티는 현재 경로 중 base를 기준으로 추가된 경로를 값으로 가지고 있다.

현재경로가 아래와 같다면
<http://127.0.0.1:3000/DECO/#/question/> 
<http://127.0.0.1:3000/DECO/#> 까지가 base이고
/question/ 이 추가된 경로이다.