React Router DOM을 사용하는 방법

소개

React Router DOM에 대한 심층 튜토리얼에 오신 것을 환영합니다! 동적 라우팅 기능으로 React 애플리케이션을 향상시키려는 UI 개발자라면 잘 찾아오셨습니다. React Router DOM은 원활하고 원활한 사용자 경험을 유지하면서 여러 보기가 포함된 단일 페이지 애플리케이션을 만들 수 있는 강력한 라이브러리입니다.

이 종합 가이드에서는 기본 개념부터 고급 기술까지 React Router DOM에 대해 알아야 할 모든 것을 안내합니다. React를 처음 접하는 사람이든 기술 수준을 높이려는 숙련된 개발자이든 관계없이 이 튜토리얼은 React 애플리케이션에서 라우팅을 효과적으로 구현하는 데 필요한 지식과 실제 사례를 제공합니다.

이제 React Router DOM의 세계를 함께 탐험해 봅시다!

React Router DOM 시작하기

React Router DOM이란 무엇입니까?

React Router DOM은 React 애플리케이션에 널리 사용되는 라우팅 라이브러리입니다. 이를 통해 단일 페이지 애플리케이션(SPA)에서 동적 클라이언트측 라우팅을 생성할 수 있습니다. React Router DOM을 사용하면 현재 URL을 기반으로 다양한 보기와 구성요소를 쉽게 관리할 수 있어 사용자에게 원활한 탐색 환경을 제공할 수 있습니다.

React Router DOM 설치

React 애플리케이션에서 라우팅 구현을 시작하기 전에 React Router DOM 패키지를 설치해야 합니다. 터미널을 열고 프로젝트 디렉터리로 이동한 후 다음 명령을 실행하세요.

npm install react-router-dom

이렇게 하면 프로젝트에 최신 버전의 React Router DOM이 설치됩니다.

기본 설정

애플리케이션에서 React Router DOM을 사용하려면 필요한 구성요소를 가져와서 기본 애플리케이션 구성요소를 BrowserRouter 구성요소로 래핑해야 합니다. 다음은 index.js 파일에서 React Router DOM을 설정하는 방법에 대한 기본 예입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

이제 기본 설정이 완료되었으므로 React Router DOM의 핵심 구성 요소와 이를 효과적으로 사용하는 방법을 살펴보겠습니다.

React Router DOM의 핵심 구성요소

경로 및 경로

Route 및 Route 구성 요소는 React Router DOM의 구성 요소입니다. 이를 통해 애플리케이션의 각 경로에 대해 렌더링되어야 하는 다양한 경로와 구성 요소를 정의할 수 있습니다.

다음은 이러한 구성요소를 사용하는 방법의 예입니다.

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

이 예에서는 홈 페이지("/"), 정보 페이지("/about"), 연락처 페이지("/contact")의 세 가지 경로를 정의했습니다. 각 경로는 해당 URL에 액세스할 때 렌더링되는 특정 구성 요소와 연결됩니다.

링크 구성요소

링크 구성요소는 애플리케이션에서 탐색 링크를 생성하는 데 사용됩니다. 이는 사용자가 전체 페이지를 다시 로드하지 않고도 여러 보기 사이를 이동할 수 있도록 해주기 때문에 React Router DOM의 필수적인 부분입니다.

링크 구성요소를 사용하는 방법은 다음과 같습니다.

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

NavLink 구성 요소

NavLink 구성 요소는 Link와 유사하지만 활성 링크 스타일을 지정하기 위한 추가 기능을 제공합니다. 이는 현재 활성 페이지를 강조 표시하려는 탐색 메뉴를 만드는 데 특히 유용합니다.

NavLink 사용 방법의 예는 다음과 같습니다.

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

이 예에서는 isActive 소품을 사용하여 활성 링크에 빨간색을 적용하고 있습니다.

고급 라우팅 기술

이제 기본 사항을 다루었으므로 React Router DOM을 사용하여 구현할 수 있는 몇 가지 고급 라우팅 기술을 살펴보겠습니다.

중첩된 경로

중첩 경로를 사용하면 애플리케이션 내에서 더 복잡한 라우팅 구조를 만들 수 있습니다. 이는 공유 구성 요소로 레이아웃을 생성하거나 관련 경로를 구성하는 데 특히 유용합니다.

다음은 중첩 경로를 구현하는 방법의 예입니다.

import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import ServiceDetails from './components/ServiceDetails';

function Layout() {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="services" element={<Services />} />
        <Route path="services/:id" element={<ServiceDetails />} />
      </Route>
    </Routes>
  );
}

export default App;

이 예에서는 머리글과 바닥글이 포함된 레이아웃 구성 요소를 만들었습니다. Outlet 구성 요소는 레이아웃 내의 하위 경로를 렌더링하는 데 사용됩니다.

동적 경로 및 URL 매개변수

동적 경로를 사용하면 가변 세그먼트를 처리할 수 있는 유연한 경로를 만들 수 있습니다. 이는 제품 페이지나 사용자 프로필 등 특정 항목에 대한 자세한 정보를 표시해야 하는 시나리오에 유용합니다.

동적 경로를 사용하고 URL 매개변수에 액세스하는 방법의 예는 다음과 같습니다.

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

function ProductDetails() {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product Details</h1>
      <p>You are viewing product with ID: {productId}</p>
    </div>
  );
}

export default ProductDetails;

이 구성요소를 사용하려면 다음과 같은 경로를 정의해야 합니다.

<Route path="/products/:productId" element={<ProductDetails />} />

프로그래밍 방식 탐색

특정 조건이나 사용자 작업에 따라 프로그래밍 방식으로 탐색해야 하는 경우가 있습니다. React Router DOM은 이러한 목적으로 useNavigate 후크를 제공합니다.

Here's an example of how to use useNavigate:

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

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    // Perform login logic here
    // If login is successful, navigate to the dashboard
    navigate('/dashboard');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

Handling Route Parameters and Query Strings

React Router DOM provides powerful tools for working with route parameters and query strings, allowing you to create dynamic and flexible routing solutions.

Route Parameters

We've already seen how to use route parameters with the useParams hook. Let's explore this further with a more complex example:

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

function BlogPost() {
  const { category, postId } = useParams();

  return (
    <div>
      <h1>Blog Post</h1>
      <p>Category: {category}</p>
      <p>Post ID: {postId}</p>
    </div>
  );
}

export default BlogPost;

To use this component, you would define a route like this:

<Route path="/blog/:category/:postId" element={<BlogPost />} />

This allows you to create URLs like /blog/technology/123 or /blog/travel/456, with the category and post ID being dynamically extracted from the URL.

Query Strings

Query strings are useful for passing optional parameters to your routes. React Router DOM provides the useSearchParams hook to work with query strings.

Here's an example of how to use useSearchParams:

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

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category');
  const sortBy = searchParams.get('sortBy');

  return (
    <div>
      <h1>Product List</h1>
      <p>Category: {category || 'All'}</p>
      <p>Sort By: {sortBy || 'Default'}</p>
      <button onClick={() => setSearchParams({ category: 'electronics', sortBy: 'price' })}>
        Filter Electronics, Sort by Price
      </button>
    </div>
  );
}

export default ProductList;

In this example, we're reading the category and sortBy parameters from the query string. We're also demonstrating how to update the query string using the setSearchParams function.

Protecting Routes and Handling Authentication

One common requirement in many applications is to protect certain routes based on user authentication status. React Router DOM can be used in conjunction with your authentication logic to create protected routes.

Here's an example of how you might implement protected routes:

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

function ProtectedRoute({ element, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" replace />}
    />
  );
}

function App() {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
      <ProtectedRoute
        path="/dashboard"
        element={<Dashboard />}
        isAuthenticated={isAuthenticated}
      />
    </Routes>
  );
}

export default App;

In this example, we've created a ProtectedRoute component that checks if the user is authenticated. If they are, it renders the specified element; if not, it redirects them to the login page.

Handling 404 Pages and Redirects

React Router DOM makes it easy to handle 404 (Not Found) pages and implement redirects when necessary.

404 Pages

To create a 404 page, you can use the * path at the end of your route definitions:

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

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

export default App;

In this example, the NotFound component will be rendered for any route that doesn't match the defined paths.

Redirects

Sometimes you may need to redirect users from one route to another. React Router DOM provides the Navigate component for this purpose:

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Home from './components/Home';
import OldPage from './components/OldPage';
import NewPage from './components/NewPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/old-page" element={<Navigate to="/new-page" replace />} />
      <Route path="/new-page" element={<NewPage />} />
    </Routes>
  );
}

export default App;

In this example, any user trying to access /old-page will be automatically redirected to /new-page.

Optimizing Performance with Code Splitting

As your application grows, you may want to implement code splitting to improve performance. React Router DOM works well with React's lazy loading feature, allowing you to load route components only when they're needed.

Here's an example of how to implement code splitting with React Router DOM:

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

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

export default App;

In this example, we're using React's `lazy` function to dynamically import our components. The `Suspense` component is used to show a loading indicator while the component is being loaded.

Conclusion

Congratulations! You've now completed a comprehensive tutorial on React Router DOM. We've covered everything from basic setup to advanced techniques like nested routes, dynamic routing, authentication, and code splitting. With this knowledge, you're well-equipped to implement robust routing solutions in your React applications.

Remember, the key to mastering React Router DOM is practice. Try implementing these concepts in your own projects, and don't be afraid to experiment with different routing structures and techniques. As you become more comfortable with React Router DOM, you'll find that it opens up new possibilities for creating dynamic and user-friendly web applications.

위 내용은 React Router DOM을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!