React에서 useParams 후크를 사용하여 동적 경로 매개변수에 액세스

React의 useParams Hook

useParams 후크는 React Router의 일부이며 현재 URL에서 동적 매개변수에 액세스하는 데 사용됩니다. 이 후크는 사용자 ID, 제품 ID 또는 경로 경로에 포함된 기타 변수 데이터와 같은 동적 세그먼트가 있는 경로가 있는 경우 주로 유용합니다.

예를 들어 블로그를 구축하고 해당 ID를 기반으로 특정 게시물을 표시하려는 경우 useParams를 사용하여 URL에서 게시물 ID를 가져와 해당 게시물을 표시할 수 있습니다.

useParams 작동 방식

• useParams는 현재 경로에서 동적 매개변수의 키-값 쌍을 포함하는 객체를 반환합니다.
• 객체의 키는 경로 매개변수의 이름(경로 경로에 지정됨)에 해당하고 값은 URL의 실제 값입니다.

구문:

const params = useParams();

반품:

• 키-값 쌍이 있는 개체. 여기서 키는 매개변수의 이름이고 값은 URL의 매개변수 값입니다.

예시 1: useParams의 기본 사용법

사용자 프로필을 표시하기 위한 경로가 있고 경로가 /profile/:userId이고 :userId가 동적 세그먼트라고 가정해 보겠습니다.

1단계: 동적 매개변수로 경로 정의

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/profile/:userId" element={<UserProfile />} />
      </Routes>
    </Router>
  );
};

export default App;

2단계: useParams를 사용하여 userId 추출

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

const UserProfile = () => {
  const { userId } = useParams();  // Extracts the userId from the URL

  return (
    <div>
      <h2>User Profile</h2>
      <p>Displaying details for user with ID: {userId}</p>
    </div>
  );
};

export default UserProfile;

설명:

• URL이 /profile/123이면 useParams 후크는 { userId: '123' }을 반환합니다.
• 그런 다음 userId는 UserProfile 구성 요소에서 해당 사용자에 대한 특정 정보를 표시하는 데 사용됩니다.

예 2: 여러 매개변수 사용

경로에 여러 개의 동적 매개변수가 있을 수 있으며 useParams는 해당 매개변수를 모두 반환합니다.

1단계: 여러 동적 매개변수를 사용하여 경로 정의

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/post/:postId/comment/:commentId" element={<PostDetail />} />
      </Routes>
    </Router>
  );
};

export default App;

2단계: useParams를 사용하여 여러 매개변수 추출

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

const PostDetail = () => {
  const { postId, commentId } = useParams(); // Extracts postId and commentId from the URL

  return (
    <div>
      <h2>Post Details</h2>
      <p>Post ID: {postId}</p>
      <p>Comment ID: {commentId}</p>
    </div>
  );
};

export default PostDetail;

설명:

• URL이 /post/456/comment/789이면 useParams 후크는 { postId: '456', commentId: '789' }를 반환합니다.
• 그런 다음 구성요소는 URL 매개변수를 기반으로 게시물 ID와 댓글 ID를 표시합니다.

예 3: 선택적 매개변수와 함께 useParams 사용

선택적으로 포함될 수 있는 매개변수로 경로를 정의하여 선택적 매개변수를 처리할 수도 있습니다.

1단계: 선택적 매개변수를 사용하여 경로 정의

const params = useParams();

2단계: useParams에서 선택적 매개변수 처리

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/profile/:userId" element={<UserProfile />} />
      </Routes>
    </Router>
  );
};

export default App;

설명:

• 이 경우 쿼리 매개변수는 선택사항입니다(경로에서 ?로 표시됨).
• URL이 /search/books인 경우 useParams는 { 쿼리: 'books' }를 반환합니다.
• URL이 /search인 경우 useParams는 {}(즉, 쿼리 없음)를 반환하고 "모든 결과 표시" 메시지가 표시됩니다.

useParams를 사용해야 하는 경우

• 동적 경로: 동적 세그먼트(예: /users/:userId, /products/:productId)를 포함하는 URL 구조가 있는 경우.
• 데이터 가져오기: URL의 동적 값을 기반으로 데이터를 가져와야 하는 경우(예: ID별로 사용자 프로필, 제품 세부정보, 블로그 게시물 가져오기)
• 중첩 경로: 중첩 경로에 동적 매개변수가 있고 URL에서 값을 추출해야 하는 시나리오에서

사용 매개변수의 제한

• 상태가 지속되지 않음: useParams는 URL에서 매개변수만 검색합니다. 경로 변경 후에는 저장하거나 보존하지 않습니다. 매개변수를 추적해야 하는 경우 상태 관리 또는 기타 후크(예: useState, useEffect)를 사용해야 할 수도 있습니다.
• 쿼리 매개변수 없음: 쿼리 매개변수(예: ?sort=asc)를 읽어야 하는 경우 useParams 대신 useLocation 후크를 사용하세요.

결론

useParams 후크는 React 구성 요소의 URL에서 동적 매개변수에 액세스하는 간단하고 효과적인 방법입니다. 이를 통해 동적 경로 작업이 훨씬 쉬워지고 더욱 유연하고 동적인 애플리케이션을 구축할 수 있습니다.

위 내용은 React에서 useParams 후크를 사용하여 동적 경로 매개변수에 액세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!