파라미터(Parameter)

공부를 하다 보면 useParams()나 파라미터(Parameter)라는 말을 자주 보게 된다.

솔직히 일상생활하면서 자주 쓰는 말이 아니기 때문에 나는 아직도 익숙치가 않다.

그래서 익숙해지고자 블로그에 정리하기로 했다.

---

파라미터(Parameter)

파라미터(Parameter)는 어떤 것을 구분하거나 전달할 때 쓰는 정보 조각이다.
특히 웹 주소(URL) 안에 들어있는 정보를 말할 때 많이 사용된다.

https://zing829.tistory.com/56

 

나의 티스토리 블로그 주소에서도 볼 수가 있는데 이 주소에서 맨 끝에 있는 56이 바로 파라미터다.

56은 블로그 글 번호, 즉 해당 글을 구분하는 정보를 나타낸다.

https://zing829.tistory.com/:postId

---

파라미터의 종류( 한 URL에 두 종류의 파라미터를 동시에 사용할 수 있다.)

1) Path Parameter (경로 파라미터) : URL 경로에 직접 포함되어 특정 리소스를 가리킨다.

• Path 파라미터는 필수다. URL 경로에 값이 없으면 페이지가 매칭되지 않는다.

2) Query Parameter (쿼리 파라미터) : 이후에 붙는 정보로, 검색이나 필터 같은 옵션 데이터를 전달할 때 주로 사용된다.

• Query 파라미터는 선택이다. 값이 없어도 페이지는 동작할 수 있다.

---

React에서 파라미터를 어떻게 사용할까?

<Route path="/users/:userId" element={<UserPage />} />

 

여기서 :userId는 동적 파라미터고, 컴포넌트 안에서 useParams()를 통해 파라미터를 꺼낼 수 있다.

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

function UserPage() {
  const params = useParams();
  console.log(params);
  
  return <div>유저 아이디: {params.userId}</div>;
}

 

💡useParams()

useParams()는 URL 경로에 포함된 동적 파라미터를 가져오는 훅(Hook)이다.
React Router에서 제공하는 함수이며, 주로 :id처럼 Path Parameter를 사용할 때 함께 사용한다.

반환값은 { 키: 값 } 형태의 객체이고, 값은 **항상 문자열(string)**이다.
해당 라우트 안에서만 작동하며, 컴포넌트 내부에서 사용해야 한다.