[React] useParams 이용하기

 

useParams 이용하기

 

---

 

 useParams는 react-router-dom에서 지원하는 함수로, URL의 매개변수의 키/값 쌍의 개체를 리턴한다. 동적 라우팅 방식으로 페이지 이동 시 URL 속의 값을 이용해야 할 때 유용하다. 예시로 사용법을 알아보자.

 

 

App.js

 

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./Home";
import User from "./User";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/User/:id" element={<User />} />
      </Routes>
    </>
  );
}

export default App;

 

우선 App.js에서 routes를 작성해준다. User/:id라고 작성하면 User 페이지를 동적으로 라우팅할 수 있다.

 

 

Home.js

 

import React from "react";
import { Link } from "react-router-dom";

export default function Home() {
  return (
    <>
      <Link to="User/0">
        <div>user1</div>
      </Link>
      <Link to="User/1">
        <div>user2</div>
      </Link>
      <Link to="User/2">
        <div>user3</div>
      </Link>
    </>
  );
}

 

메인페이지이다. 예시를 위해 Link를 3개 생성하였다.

 

 

User:id.js

 

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

export default function User() {
  const { id } = useParams();

  console.log(id);

  return <div>userPage</div>;
}

 

 User 페이지에 useParams()를 작성해주면 URL 속의 id 값을 가져올 수 있다. User/1 페이지에서 id는 1, User/2 페이지에서 id는 2, User/3 페이지에서 id는 3이 된다.

 

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

export default function User() {
  const { id } = useParams();

  const userList = [
    { id: 0, name: "kim" },
    { id: 1, name: "lee" },
    { id: 2, name: "park" },
  ];

  return <div>{userList[id].name}</div>;
}

 

이런 식으로 작성해주면 URL마다 동적으로 다른 데이터를 보여줄 수 있다.

 

---

 

참고 자료

https://velog.io/@party3205/React-useParams-%EC%A0%95%EB%A6%AC