적절한 라우팅을 통한 React Outlet에 대한 이해

이 기사에서는 React 아웃렛이 작동하는 방식과 React 애플리케이션의 라우팅 기본 사항을 살펴봅니다. 무엇보다도 라우팅의 기본을 이해해야 합니다

기본 사항 이해

에 들어가기 전에 React Router에 대해 확실히 이해하고 있는지 확인하겠습니다.

• React Router란 무엇인가요? React Router는 React 애플리케이션의 다양한 보기 간 탐색을 가능하게 하는 널리 사용되는 JavaScript 라이브러리입니다. 이를 통해 URL을 특정 구성 요소에 매핑하는 경로를 정의할 수 있습니다. 더..

• 라우팅이 중요한 이유는 무엇입니까? 라우팅은 사용자가 전체 페이지를 다시 로드하지 않고도 탐색할 수 있는 단일 페이지 애플리케이션(SPA)을 구축하는 데 필수적이며 더 부드럽고 역동적인 경험을 제공합니다.

이제 React Outlet을 살펴보겠습니다

리액트 아울렛이란 무엇입니까?

<아울렛> 컴포넌트는 React Router에 하위 경로를 렌더링할 위치를 알려주는 상위 경로 구성 요소 내의 자리 표시자입니다. 현재 URL을 기반으로 콘텐츠를 변경하는 동적 컨테이너처럼 작동합니다.
이 기능은 헤더나 사이드바와 같은 페이지의 일부는 일관되게 유지되고 다른 부분은 경로에 따라 동적으로 변경되는 복잡한 레이아웃을 관리하는 데 도움이 됩니다.

작동 방식: URL이 상위 경로와 일치하면 React Router는 해당 상위 구성 요소 내에서. 그런 다음 일치하는 하위 경로의 구성 요소를 해당 으로 렌더링합니다.

React 애플리케이션에 적합한 반응 라우팅을 사용하여 Outlet을 구현해 보겠습니다

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

이 AllRoutes 구성 요소는 React 웹 앱의 여러 페이지 간 탐색을 처리하는 React-router-dom을 사용하여 React 애플리케이션용 라우팅 시스템을 정의합니다. 코드에 대한 자세한 분석은 다음과 같습니다

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

패키지 가져오기

BrowserRouter: 이 구성 요소는 브라우저에서 라우팅을 활성화합니다. HTML5 기록 API를 사용하여 UI와 URL의 동기화를 유지합니다.
콘센트, 경로, 경로: 이러한 구성 요소는 애플리케이션의 다양한 경로(또는 페이지)를 정의하고 처리합니다.
Suspense: Suspense는 지연 로드된 구성 요소를 처리하는 데 사용됩니다. 구성요소가 로드되는 동안 대체 구성요소(이 경우 사용자 정의 로더)가 표시됩니다.
지연: 이 기능은 필요할 때만 구성 요소를 지연 로드하여 코드 분할을 가능하게 하여 초기 번들 크기를 줄여 앱 성능을 향상시킵니다.
로더: 구성요소가 느리게 로드되는 동안 로딩 표시를 표시하는 사용자 정의 구성요소입니다.
ProtectedRoute: 이 사용자 정의 구성 요소는 인증된 사용자만 특정 경로에 액세스할 수 있도록 보장하여 보안을 강화합니다.
루트 경로(/): 이 경로는 애플리케이션의 루트 경로입니다. 로그인 구성요소를 렌더링합니다.

경로 경로 가져오기

애플리케이션은 별도의 파일(routePaths)에서 사전 정의된 경로(예: 대시보드, homePath, loginPath, rootPath)를 가져옵니다. 이렇게 하면 코드를 더 쉽게 유지 관리할 수 있으며 구성 요소 내에서 경로 경로를 하드 코딩하는 것을 방지할 수 있습니다.

AllRoutesComponent에서 경로 정의

주요 기능인 AllRoutesComponent는 앱의 다양한 경로가 처리되는 방식을 정의합니다.
: 라우팅 구조를 래핑하고 브라우저 탐색을 관리합니다.
: 이 구성 요소는 애플리케이션에 정의된 모든 경로를 보유합니다.
: 단일 경로를 정의합니다. path prop은 URL 패턴을 정의하고, element prop은 해당 경로에 대해 렌더링할 구성 요소를 지정합니다.

• 루트(rootPath) 경로는 하위 경로의 컨테이너 역할을 합니다.

• 인덱스 경로는 사용자가 / 경로를 방문할 때 기본적으로 LoginComponent를 렌더링합니다.

• /login 경로는 LoginComponent도 렌더링합니다.

• /home 및 /dashboard와 같은 경로는 ProtectedRoute 구성 요소 내에 래핑되어 승인된 사용자만 이러한 페이지에 액세스할 수 있도록 보장합니다.

: 중첩된 경로를 렌더링할 수 있습니다. 모든 하위 경로(예: /login, /home)는 상위 경로(rootPath) 내부에 렌더링됩니다.

보호된 경로란 무엇입니까?

일부 경로(예: homePath 및 대시보드)는 ProtectedRoute 요소 내에 중첩됩니다. 이는 사용자가 해당 페이지에 액세스하려면 특정 조건(예: 로그인)을 충족해야 함을 의미합니다. 사용자가 승인되지 않은 경우 ProtectedRoute 구성 요소는 일반적으로 사용자를 로그인 페이지나 오류 페이지로 리디렉션합니다.
보호된 경로의 코드는 다음과 같습니다

// import packages

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import {
  dashboard,
  homePath,
  loginPath,
  rootPath
} from "./routePaths";

import Loader from "../components/loader";
import ProtectedRoute from "./protectedRoute";

// import route paths

const LoginComponent = lazy(() => import("../pages/login"));
const HomeComponent = lazy(() => import("../pages/home"));
const RouteNotFoundComponent = lazy(() => import("../pages/pageNotFound"));

const DashboardComponent = lazy(() => import("../pages/dashboard/"));

const AllRoutesComponent = () => {
  return (
    <Suspense fallback={<Loader />}>
      <BrowserRouter>
        <Routes>
          <Route path={rootPath} element={<Outlet />}>
            <Route index element={<LoginComponent />} />
            <Route path={loginPath} element={<LoginComponent />} />
            <Route element={<ProtectedRoute />}>
              <Route path={homePath} element={<HomeComponent />} />
              <Route path={dashboard} element={<DashboardComponent />} />
            </Route>
            <Route path="*" element={<RouteNotFoundComponent />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default AllRoutesComponent;

코드 설명

• 패키지 가져오기

React, { useEffect }: React는 UI 구축을 위한 핵심 패키지이고, useEffect는 기능적 구성요소에서 사이드 이펙트를 실행하는 후크입니다. 여기서 useEffect는 사용자가 인증되지 않은 경우 리디렉션을 처리하는 데 사용됩니다.
useNavigate: React-router-dom의 이 후크는 프로그래밍 방식 탐색을 활성화합니다. 인증되지 않은 사용자를 리디렉션하는 데 사용됩니다.
Outlet: 보호된 경로 내부에 중첩된 경로에 대한 자리 표시자입니다. 하위 경로를 동적으로 렌더링할 수 있습니다.
BaseLayout: 이 구성 요소는 보호된 경로를 레이아웃으로 래핑하여 보호된 페이지에 일관된 모양과 구조를 제공합니다.

• 구성요소 정의

useNavigate(): 이 후크를 사용하면 다른 경로로 이동할 수 있습니다. 이 경우 사용자가 인증되지 않은 경우 rootPath로 이동하는 데 사용됩니다.
isAuthenticated 및 사용자: 이 값은 현재 하드코딩되어 있지만 일반적으로 전역 상태 또는 컨텍스트에서 일부 인증 상태(예: JWT 토큰, 세션 데이터 등)를 확인하여 동적으로 설정할 수 있습니다.
isAuthenticated: 사용자가 인증되었는지 여부를 결정하는 플래그입니다. false인 경우 사용자가 리디렉션됩니다.
사용자: 현재 로그인된 사용자입니다. 이 값은 컨텍스트 또는 전역 상태에서 동적으로 검색할 수 있지만 지금은 하드코딩된 문자열('shruti')입니다.

useEffect:useEffect 후크는 인증되거나 변경 사항을 탐색할 때마다 실행됩니다.
useEffect 내부에서 코드는 사용자가 인증되었는지 여부를 확인합니다. 그렇지 않은 경우(!가 인증된 경우) 탐색 기능을 사용하여 사용자를 루트 경로로 리디렉션합니다.
{replace: true } 옵션은 브라우저 기록에 리디렉션을 추가하는 것을 방지합니다. 즉, 사용자는 보호된 페이지로 다시 이동할 수 없습니다.

이제 BaseLayout 구성 요소 코드를 살펴보겠습니다

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

BaseLayout 구성 요소는 애플리케이션의 모든 페이지에 대한 공통 레이아웃 구조 역할을 합니다.
사이드바, 메인 콘텐츠 영역 등 공통 요소가 포함되어 있습니다.
다양한 경로의 하위 구성 요소는 기본 콘텐츠 영역 내의 Outlet 구성 요소를 사용하여 렌더링됩니다.

라우터 아웃렛으로 지연 로딩 라우팅을 구현하려면 이 기사를 사용해 보세요

결론

React의 Outlet을 사용한 지연 로딩 라우팅은 앱의 초기 로드 시간을 줄여 성능을 최적화하는 강력한 방법입니다. React.lazy() 및 Suspense를 사용하면 필요한 경우에만 구성 요소가 로드되는 반면 Outlet 구성 요소는 효율적인 중첩 라우팅을 허용합니다. 보호된 경로의 사용과 결합된 이 접근 방식은 애플리케이션에서 경로를 관리하기 위한 확장 가능하고 성능 친화적인 모듈식 구조를 제공합니다.

그게 다야!

한번 해보고 의견을 댓글로 남겨주세요!

위 내용은 적절한 라우팅을 통한 React Outlet에 대한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!