React Router vFeatures, 설정 및 모범 사례 이해

React Router v6: 전체 가이드

React Router는 React 애플리케이션에서 라우팅에 사용되는 가장 널리 사용되는 라이브러리입니다. 이를 통해 URL을 기반으로 다양한 구성 요소 간을 탐색할 수 있으므로 전체 페이지를 다시 로드하지 않고도 콘텐츠가 업데이트되는 단일 페이지 애플리케이션(SPA) 환경을 제공할 수 있습니다. React Router v6은 최신 주요 릴리스이며 이전 버전에 비해 다양한 개선 사항, 단순화 및 새로운 기능을 도입했습니다.

---

React Router v6의 주요 기능 및 변경 사항

1. 단순화된 API

   • React Router v6에는 경로 및 탐색 정의를 위한 더 간단하고 직관적인 API가 도입되어 v5에 존재하는 많은 해결 방법이 필요하지 않습니다.

2. 경로요소(element)

   • v6에서는 이제 경로가 구성 요소나 렌더링 소품 대신 요소 소품을 사용합니다. 이를 통해 렌더링할 구성 요소를 직접 전달할 수 있습니다.
   • 이전(v5): 구성요소={ComponentName}
   • 새로운 기능(v6): 요소={}

3. 경로 매칭

   • 이제 경로 일치가 더욱 직관적입니다. v6에서는 경로가 정확히 일치합니다. 즉, 가장 일치하는 항목이 선택되며 더 이상 동적 세그먼트를 처리하기 위해 "포괄" 경로가 필요하지 않습니다.
   • <스위치> 구성 요소는 로 대체되며 URL과 일치하는 첫 번째 경로만 렌더링하는 데 사용됩니다.

4. 중첩 경로

   • React Router v6을 사용하면 중첩된 경로를 더 쉽게 정의할 수 있습니다. 중첩을 위해 렌더나 하위 항목을 사용하는 대신 이제 요소 prop을 사용하여 중첩 경로를 직접 정의할 수 있습니다.

5. 더 이상 정확하지 않습니다

   • React Router v6에서는 기본적으로 모든 경로가 정확하게 일치하므로 정확한 일치를 지정하기 위해 Exact Prop을 사용할 필요가 없습니다.

6. React 라우터 후크

   • React Router v6은 useNavigate, useParams, useLocation, useMatch 및 useNavigate를 포함하여 새로운 아키텍처에 맞게 후크를 업데이트했습니다.

---

React Router v6 설정 방법

React Router v6을 시작하려면 다음 단계를 따르세요.

1. React Router v6 설치

npm 또는 Yarn을 사용하여 React Router v6을 설치할 수 있습니다.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2. 경로 및 구성요소 정의

React Router v6에서 기본 라우팅을 설정하는 방법의 예를 살펴보겠습니다.

1단계: 기본 앱 구성 요소 정의

npm install react-router-dom@6
# or
yarn add react-router-dom@6

• <경로>: 이는 <스위치> 이전 버전의 구성 요소입니다. 첫 번째로 일치하는 경로만 렌더링됩니다.
• } />: 홈 페이지의 경로를 정의하고 홈 구성 요소를 렌더링합니다.
• : * 와일드카드는 404 오류 또는 일치하지 않는 경로를 처리하는 데 사용되며 URL이 어떤 경로와도 일치하지 않는 경우 NotFound 구성 요소를 렌더링합니다.

2단계: 개별 구성요소 생성

Home.js

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>About.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

React Router v6을 사용한 동적 라우팅

사용자 ID가 URL의 일부인 사용자 프로필 페이지와 같은 동적 경로를 처리하기 위해 React Router v6은 useParams 후크를 제공합니다.

1단계: 동적 경로 정의

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

설명:

• :userId는 경로 경로의 동적 세그먼트입니다. useParams 후크를 사용하면 UserProfile 구성 요소의 userId 값에 액세스할 수 있습니다.
• /user/123으로 이동하면 UserProfile 구성 요소가 userId를 123으로 렌더링하고 표시합니다.

---

React Router v6의 중첩 경로

중첩 경로를 사용하면 상위 경로 내의 하위 경로를 정의하여 복잡한 레이아웃을 구축할 수 있습니다.

1단계: 상위 및 하위 경로 정의

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

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

  return <h2>User Profile for ID: {userId}</h2>;
};

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

export default App;

설명:

• 대시보드 구성요소에는 개요 및 설정을 위한 중첩 경로가 포함되어 있습니다.
• 상위 경로의 /*를 사용하면 모든 하위 경로가 /dashboard에서 처리됩니다.

---

React Router v6 후크

React Router v6에는 라우팅 정보를 탐색하고 액세스하기 위한 여러 후크가 도입되었습니다.

1. useNavigate: 프로그래밍 방식으로 다양한 경로를 탐색합니다.
2. useParams: 동적 URL 매개변수에 액세스합니다.
3. useLocation: 현재 위치(URL)에 대한 정보를 가져옵니다.
4. useMatch: 현재 URL을 특정 경로와 일치시킵니다.
5. useResolvedPath: 경로를 절대 URL로 확인합니다.

예: 탐색 후크 사용

useNavigate 후크를 사용하면 애플리케이션 내에서 프로그래밍 방식으로 탐색할 수 있습니다.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

React Router v6 모범 사례

• 기본적으로 정확한 일치: React Router v6은 기본적으로 경로를 정확하게 일치시키므로 정확한 경로를 지정하지 않고도 경로 일치를 더 쉽게 처리할 수 있습니다.
• 요소 Prop 사용: 구성 요소 Prop을 사용하는 대신 JSX를 요소 Prop에 직접 전달하여 코드를 단순화하고 렌더링 기능의 필요성을 줄입니다.
• 중첩 라우팅: 중첩 경로를 사용하여 하위 경로가 포함된 복잡한 페이지 레이아웃을 구축하고 코드를 모듈화하고 유지 관리 가능하게 유지하세요.
• 와일드카드 경로로 404 처리: 일치하지 않는 모든 경로를 포착하고 404 페이지를 표시하거나 사용자를 기본 경로로 리디렉션하려면 와일드카드 *를 사용하세요.

---

결론

React Router v6에는 더 간단한 API, 더 나은 경로 일치, 동적 및 중첩 경로에 대한 향상된 지원 등 이전 버전에 비해 여러 가지 개선 사항이 도입되었습니다. useNavigate, useParams 및 useLocation과 같은 후크를 활용하면 React 애플리케이션에서 강력하고 유연한 라우팅 시스템을 구축할 수 있습니다.

---

위 내용은 React Router vFeatures, 설정 및 모범 사례 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!