인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴이에요.

useParams hook은 React Router에서 제공되는 기능으로, 현재 화면의 URL에서 파라미터 값을 추출하는 역할을 합니다. 따라서, 제공되는 파라미터의 이름은 라우트 설정 시에 작성한 것과 동일해야 합니다.

영화 상세 페이지 구현 시에 useParams에서 파라미터값이 movieId로 설정되어 있다면, 라우트 설정 시에도 /movies/:movieId와 같이 설정되어 있어야합니다. 이 경우, useParams에서 추출한 파라미터 값이 “movieId”와 동일할 것입니다.

즉, 코드에서는 다음과 같이 작성할 수 있습니다:

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

function MovieDetail() {
  const { movieId } = useParams();
  console.log(movieId); // 실제로 추출된 파라미터 값 확인
  ...
}

이를 통해 useParams에서 추출된 파라미터 값이 “movieId”인지 확인하실 수 있을 것입니다.

더 자세한 내용은 리액트 라우터 공식 문서를 참고해보시면 도움이 될 것입니다. 감사합니다.