React 라우터를 활용하면 컴포넌트 중심 방법론을 통해 React 기반 애플리케이션 내에서 라우팅을 구현할 수 있는 효과적인 수단을 제공합니다. 이 다용도 도구는 페이지 간 탐색, 쿼리 매개변수 관리 등과 같은 다양한 라우팅 요구 사항을 수용합니다.

React 라우터 V6는 라우팅 알고리즘에 주목할 만한 일련의 수정 사항을 통합하여 이전 반복에 내재된 단점을 완화하고 우수한 라우팅 결과를 제공합니다.

React 라우터 V6를 이용한 라우팅 시작하기

프로세스를 시작하기 위해 React 애플리케이션을 설정하거나 Vite를 통해 애플리케이션을 구성할 수 있습니다. 프로젝트가 설정되면 react-router-dom 라이브러리 설치를 진행하세요.

 npm install react-router-dom 

React 라우터를 이용한 경로 생성

애플리케이션 내에서 경로를 설정하려면 브라우저라우터 컴포넌트를 사용하여 전체 애플리케이션을 둘러싸는 것이 필수적입니다. 이렇게 하려면 주어진 지침에 따라 index.jsx 또는 main.jsx 파일의 내용을 수정해야 합니다.

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
) 

Application 컴포넌트에 BrowserRouter 래퍼를 사용하면 React 라우터 라이브러리의 포괄적인 프레임워크와 기능을 제공하므로 전체 애플리케이션을 원활하게 탐색할 수 있습니다.

경로 컴포넌트 사용

애플리케이션 내에 BrowserRouter 컴포넌트를 통합한 후 해당 애플리케이션에 대한 경로 구성을 설정할 수 있습니다.

React 라우터의 이전 버전인 Switch 컴포넌트가 더 발전된 Routes 컴포넌트로 대체되었습니다. 이 새로운 컴포넌트는 상대 라우팅, 자동 라우팅 순위 지정, 중첩된 라우팅을 처리하는 기능을 지원합니다.

일반적으로 라우팅은 애플리케이션의 최상위 컴포넌트(예: App 컴포넌트)에서 구현되는 것이 일반적입니다. 하지만 이 배치는 프로젝트의 특정 구조와 조직에 따라 달라질 수 있습니다.

웹 애플리케이션 구현을 시작하려면 텍스트 편집기 또는 통합 개발 환경(IDE)에서 “App.jsx” 파일을 열어야 합니다. 파일이 열리면 이 파일 내에 있을 수 있는 기존 상용구 React 코드를 제공된 대체 코드 스니펫으로 대체해야 합니다. 이는 React를 사용하여 웹 애플리케이션의 기능을 구축하기 위한 기초가 될 것입니다.

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  )
}

export default App 

주어진 라우팅 구성은 각각의 페이지 요소에 대해 고유한 URL 경로를 효과적으로 전달하여 개인이 지정된 URL 주소에 액세스할 때마다 애플리케이션이 올바른 인터페이스를 표시하도록 보장합니다.

‘Route’ 컴포넌트에서 ‘prop’ 요소를 활용하면 단순히 컴포넌트 이름을 제공하는 대신 기능 컴포넌트를 전달할 수 있습니다. 따라서 경로와 해당 컴포넌트 계층 구조를 통해 소품을 전송할 수 있습니다.

“src” 디렉터리에 “pages” 폴더를 새로 생성하고 “Dashboard.jsx” 및 “About.jsx”에 대한 별도의 JavaScript 파일을 개발하세요. 이 파일을 활용하여 라우팅 기능을 실험해 보세요.

createBrowserRouter를 사용하여 경로 정의하기

React 라우터 문서 에서는 React 웹 애플리케이션의 라우팅 구성을 정의할 때 createBrowserRouter 컴포넌트를 사용할 것을 권장합니다. 이 컴포넌트는 경로 배열을 인수로 받는 BrowserRouter의 가벼운 대안입니다.

이 요소를 사용하면 App 컴포넌트 내에서 경로를 정의할 필요가 없으며, index.jsx 또는 main.jsx 파일에서 모든 라우팅 구성을 상세히 정의할 수 있습니다.

물론, 이 문장을 좀 더 정교하게 표현해 드릴 수 있다면 기꺼이 그렇게 하겠습니다. 다음은 이 특정 컴포넌트의 실제 적용을 보여주는 그림입니다:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
); 

라우팅 구성은 CreateBrowserRouter 및 RouterProvider 컴포넌트를 활용하여 React 애플리케이션에 특별히 맞춤화된 효율적인 라우팅 시스템을 설정합니다.

이 특정 구현의 특징은 라우터 컨텍스트 제공을 프로그램 범위 내의 모든 구성 요소에 위임하기 위해 라우터 제공자 컴포넌트를 사용하여 애플리케이션을 포괄하는 기존의 브라우저라우터 컴포넌트 활용을 대체한다는 데에 있습니다.

페이지를 찾을 수 없는 경로 구현

“경로” 구성 요소 내에서 “경로 프로퍼”를 활용하려면 지정된 “구성 요소”를 표시하기 전에 제공된 “경로”와 기존 “URL”을 비교하여 일치하는지 여부를 확인해야 합니다.

요청된 URL과 일치하는 사용 가능한 경로가 없는 경우를 해결하려면 404 페이지를 찾을 수 없음 오류를 해결하기 위해 특별히 설계된 전용 경로를 설정하는 것이 좋습니다. 이러한 경로를 통합하면 방문자가 유효하지 않거나 존재하지 않는 웹 페이지에 액세스하려고 시도할 때마다 유익하고 관련성 있는 피드백을 받을 수 있습니다.

404 경로를 설정하려면 다음과 같이 경로의 구성에 통합하세요:

 // using the Route component
<Route path="*" element={<NotFound />} /> 

// using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

다음은 React에서 이러한 단계를 구현하는 방법에 대한 예시입니다: ”’자바스크립트 ‘에서 React를 임포트합니다; ‘react-router-dom’에서 { Link }를 가져옵니다; ‘./NotFound.module.css’에서 스타일을 가져옵니다; const NotFound = () => (

); 내보내기 기본값 NotFound;

별표(*)는 지정된 URL에서 특정 경로가 일치하지 않을 때 자리 표시자 역할을 하며, 이러한 상황을 처리하는 포괄적인 메커니즘으로 작동합니다.

사용 탐색 훅을 사용한 프로그래밍 방식 탐색

`사용 탐색` 커스텀 훅을 사용하면 개발자가 프로그래밍 방식으로 애플리케이션을 탐색할 수 있으므로 버튼 누르기나 양식 제출과 같은 사용자 행동이나 발생을 기반으로 탐색을 시작할 때 유용할 수 있습니다.

애플리케이션 내에서 프로그래밍 방식으로 탐색하기 위해 “useNavigate” 훅을 활용하려면 먼저 “About.jsx”라는 함수형 컴포넌트를 만들어야 합니다. 그런 다음 React 라우터 패키지에서 해당 훅을 임포트해야 합니다.

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

물론이죠! 다음은 `react-router-dom` 라이브러리의 `useHistory` 훅을 사용하여 특정 경로로 이동하는 버튼을 React에서 만드는 예시입니다: ”’자바스크립트 ‘react-router-dom’에서 { useHistory }를 가져옵니다; 함수 MyComponent() { // 히스토리 객체를 가져와 버튼 엘리먼트에 클릭 이벤트 리스너를 설정합니다. const history = useHistory(); function handleClick(event) { if (event.target.tagName === ‘A’) { // 외부 링크로 이동하고 싶지 않으므로 링크가 웹사이트 외부에 있는지 확인합니다. if (!isExternalLink(event.target)) { // 외부 링크가 아닌 경우 기본 동작을 방지

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

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>
      // Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

실제로 비슷한 명명법을 공유하지만, React 라우터 버전 6의 “useNavigate” 및 “useNavigation” 훅의 활용은 서로 다른 기능을 가지고 있습니다.

탐색 훅을 사용하면 현재 탐색 상태 및 다양한 관련 세부 정보를 포함하여 탐색과 관련된 관련 정보를 검색할 수 있습니다. 이러한 기능은 진행 중인 절차에 대한 미적 피드백을 제공하는 진행률 또는 활동 표시기와 같은 사용자 인터페이스 구성 요소를 렌더링하는 데 유리할 수 있습니다.

`useNavigation` 훅을 활용하면 React Native 애플리케이션 내에서 내비게이션을 효과적으로 관리할 수 있으며, 여러 화면과 컴포넌트 사이를 원활하게 탐색할 수 있는 편리한 액세스를 제공할 수 있습니다.

 import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

SubmitButton 컴포넌트는 useNavigation 훅을 사용하는 유틸리티 함수의 활용을 통해 확인된 탐색 상태에 따라 비문의 동적 변경을 거쳐야 합니다.

각 후크는 고유한 목적을 수행하지만 함께 사용될 수 있습니다. 내비게이션 절차를 시작하기 위해 ‘useNavigate’ 훅을 사용하고, 실시간 내비게이션 데이터를 수집하기 위해 ‘useNavigation’ 훅을 사용하는 경우, 이 정보는 브라우저 환경 내에서 실시간 피드백을 렌더링하기 위한 사용자 인터페이스의 유형을 알려줍니다.

useRoutes 훅 사용

앞서 언급한 훅을 사용하면 경로 경로 매핑을 관련 컴포넌트와 함께 포괄적인 방식으로 지정할 수 있으므로 경로를 일치시키고 이후 적절한 컴포넌트를 렌더링하는 프로세스가 용이해집니다.

제안된 방법론의 활용에 대한 그림이 아래에 제공됩니다:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

경로 객체는 애플리케이션의 계층 구조 내에서 URL 경로 패턴과 반응형 컴포넌트 간의 대응을 설정합니다. 그 후 앱 컴포넌트는 이 연결을 활용하여 현재 URL을 정의된 경로와 비교하고 일치하는 경로에 해당하는 해당 컴포넌트를 표시합니다.

이 접근 방식을 활용하면 라우팅 로직을 세밀하게 제어할 수 있으므로 특정 애플리케이션 요구 사항에 맞는 맞춤형 경로 처리 메커니즘을 개발할 수 있습니다.

React 애플리케이션에서 라우팅 처리하기

React는 본질적으로 애플리케이션 내 탐색을 관리할 수 있는 솔루션이 없지만, React 라우터는 웹 개발 프로젝트에서 원활한 상호작용과 사용자 경험을 촉진하도록 설계된 포괄적인 라우팅 도구 및 기능 세트를 제공하여 이 문제를 효과적으로 해결합니다.