useParams

📍useParams란?

• 리액트 훅으로 리액트에서 라우터 사용시 동적 파라미터 정보를 가져와 활용하고 싶을 때 사용
• 현재 URL의 경로에서 URL 매개변수를 쉽게 가져오는 데 사용
• 파라미터가 아닌 현재 페이지의 pathname을 가져오려면 useLocation()을 사용해야함

...URL/user/1
user는 pathname, 1은 parameter

• 사용 예:

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

const MyComponent = () => {
  const { id } = useParams(); // URL 경로에서 'id' 매개변수를 가져옴
  return <div>ID: {id}</div>;
};

• 주요 특징:
  • 경로 매개변수(예: /users/:id)를 사용하여 동적으로 URL에서 값을 가져옵니다.
  • URL의 쿼리 문자열은 처리하지 않습니다.

 

📍useParams()의 작동 방식

• URL 경로에서 매개변수 추출: useParams()를 호출하면 현재 URL에서 정의된 매개변수를 객체 형태로 반환

이 객체의 키는 URL에서 정의한 매개변수의 이름과 일치한다

• 주로 동적 라우팅에 사용: 주로 동적 경로를 사용하는 경우에 유용함.
  • 예를 들어, /projects/:projectId와 같은 경로에서 projectId를 가져오는 데 쓰임

 

☑️ 동적 라우팅 예시

1. 라우터 설정: 먼저, react-router-dom을 사용하여 라우터 설치 /설정 / Import 해야 함

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ApplyPage from './ApplyPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/projects/:projectId" element={<ApplyPage />} />

      </Routes>
    </Router>
  );
};

export default App;

: 기호 : 뒤에 오는 부분이 동적 매개변수 임을 나타냄 . 즉 고정된 값이 아니라 사용자가 제공하는 값

 

2. useParams() 사용: ApplyPage 컴포넌트에서 useParams()를 사용하여 projectId를 가져옴

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

const ApplyPage = () => {
  const { projectId } = useParams(); // URL에서 projectId 가져오기

  return (
    <div>
      <h1>Project ID: {projectId}</h1>
    </div>
  );
};

export default ApplyPage;

 

3. 예시 URL

<http://localhost:3000/ApplyPage/1>

여기서 1은 실제 projectId에 해당하는 값입니다.

 

💡 주의사항

해시: URL에서 # 뒤의 부분은 해시로 취급되며, React Router의 useParams는 해시를 처리하지 않음

즉, 실제 projectId가 FEED#5679일때 projectId는 FEED로만 인식되고, 해시 이후의 5679는 무시됨

 

☑️ 실전 예시

☑️import

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

 

1. useParams 정보를 하나의 변수에 저장한다.

2.  파라미터 값을 사용할 수 있다.

☑️ 총 코드

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

const test = () => {
  let { params } = useParams();  // 동적 파라미터를 가져옵니다.

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default test;

• let { params } = useParams(); 구문에서 params는 URL에 정의된 동적 파라미터를 포함하는 객체
• 예시 URL: ~url~/test/1 이 URL에서 1은 동적 파라미터. 출력: "현재 페이지의 파라미터는 1입니다."라고 출력됨