🚩 React Router useParams 완벽 정리

1️⃣ useParams란?

useParams는 React Router에서 제공하는 훅으로,
URL의 path 뒤에 입력되는 /:param 형태의 값(동적 파라미터) 을 가져오는 데 사용합니다.

예를 들어:

/users/123

이 URL에서 123을 가져오려면 아래처럼 설정합니다.

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

그리고 컴포넌트에서:

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

export default function UserDetail() {
  const { userId } = useParams();
  console.log(userId); // "123"

  return <div>User ID: {userId}</div>;
}

---

2️⃣ 어떤 값을 가져오는가?

✅ useParams는 URL의 path 뒤에 오는 값 중 :이름으로 설정한 값만 가져옵니다.

❌ 쿼리스트링(?key=value)이나 해시(#section) 값은 가져오지 못합니다.
쿼리스트링은 useSearchParams로 가져옵니다.

---

3️⃣ 사용 방식 요약

1) 라우트 설정

<Route path="/posts/:postId" element={<PostDetail />} />

• :postId ➔ 동적 파라미터로 선언

2) 컴포넌트에서 사용

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

export default function PostDetail() {
  const { postId } = useParams();
  console.log(postId); // URL에 입력된 값 출력

  return <div>Post ID: {postId}</div>;
}

---

4️⃣ 실무 예제

게시글 상세 데이터를 가져오는 예시:

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "axios";

export default function PostDetail() {
  const { postId } = useParams();
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      const res = await axios.get(`/api/posts/${postId}`);
      setPost(res.data);
    };
    fetchPost();
  }, [postId]);

  if (!post) return <div>Loading...</div>;
  return <div>{post.title}</div>;
}

✅ useParams()로 가져온 postId를 API 요청 URL에 넣어 데이터를 가져와 화면에 표시합니다.

---

5️⃣ 주요 특징 및 주의사항

✅ useParams는 해당 컴포넌트가 Route로 렌더링될 때만 작동합니다.

✅ 반환되는 값은 문자열(string) 입니다. 필요시 parseInt() 등을 사용해 숫자로 변환해 사용하세요.

✅ URL의 path param 이름(:param)과 변수 이름이 정확히 일치해야 합니다.

---

✏️ 한줄 요약

useParams는 React Router에서 /:param으로 선언한 URL의 path 파라미터 값을 가져오기 위한 훅으로, 동적 상세 페이지, 수정 페이지 등의 데이터를 가져오는 실무에서 매우 자주 사용합니다.

---

---

const params = useParams();
//console.log(params);
return <h1>Coin : {params}</h1>

>> 
const {coinId} = useParams();
return <h1>Coin : {coinId}</h1>;

display flex or block