[React] url 파라미터 값 가져오기

url의 파라미터 값을 가져오기 위해 useParams()를 사용했다.

✨출처 - react 공식 Doc✨

url파라미터는

• http://localhost:3000/posts/21

위 url에 21에 해당하는 것이다.
posts중에서도 식별 값이 21인 정보만 조회하기 위해 사용하곤 한다.

• http://localhost:3000/posts?post=21

위 같은 경우는 쿼리스트링으로 정보를 넘겨준 것이라 다른 경우다!!!!!

url 파라미터 값을 가져오기 위해 react-router에서 제공하는 userParams()를 사용했다.
바로 사용할 수 있는 건 아니고, <Route path> 를 사용할 때

    <Routes>
        <Route path="posts">
     👀 <Route path="posts/:postId" element={<PostPage />} /> 👀
        <Route path="me" element={...} />
      </Route>
    </Routes>

위 코드처럼 파라미터를 ':' 로 정의해줘야한다.
useParams()는 path와 일치하는 dynamic 파라미터의 값을 key-value pairs로 반환한다.

사용하면
(✳✳ url :http://localhost:3000/posts/21 인 경우)

const params = useParams();

console.log(params);

--console--

{postId : 21}

위 처럼 반환된다.

1️⃣
const params = useParams();

console.log(params.postId);

2️⃣
const params = useParams().postId;

console.log(params);

--console--

21

원하는 값을 참조하여 사용하면 된다~

끝!