[javascript] 리액트 라우터의 다중 페이지 지원과 확장 방법

04 Dec 2023

javascript

리액트 라우터는 싱글 페이지 애플리케이션(Single Page Application)에서 다중 페이지를 지원하고 확장할 수 있는 강력한 도구입니다. 이 글에서는 리액트 라우터를 사용하여 다중 페이지를 지원하고 확장하는 방법을 알아보겠습니다.

다중 페이지 지원

리액트 라우터를 사용하여 다중 페이지를 지원하려면, BrowserRouter 컴포넌트를 사용해야 합니다. 이 컴포넌트는 브라우저의 기록 기능을 사용하여 다중 페이지를 관리합니다. 다음은 다중 페이지를 지원하는 간단한 예제입니다.

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

function HomePage() {
  return <h1>Home Page</h1>;
}

function AboutPage() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </div>
    </BrowserRouter>
  );
}

export default App;

위의 예제에서는 BrowserRouter 컴포넌트를 사용하여 다중 페이지를 지원하고 있습니다. Link 컴포넌트를 사용하여 각 페이지로 이동할 수 있습니다. Route 컴포넌트를 사용하여 라우트 경로에 해당하는 컴포넌트를 렌더링합니다.

라우트 확장

리액트 라우터를 사용하면 매우 간단하게 라우트를 확장할 수 있습니다. 라우트 확장은 특정 경로에 대한 추가적인 동작을 정의하는 것을 의미합니다. 다음은 라우트를 확장하는 예제입니다.

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

function HomePage() {
  return <h1>Home Page</h1>;
}

function AboutPage() {
  return <h1>About Page</h1>;
}

function CustomRoute({ component: Component, ...rest }) {
  return (
    <Route {...rest} render={(props) => (
      <div>
        <h2>Custom Header</h2>
        <Component {...props} />
        <h2>Custom Footer</h2>
      </div>
    )} />
  );
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <CustomRoute exact path="/" component={HomePage} />
        <CustomRoute path="/about" component={AboutPage} />
      </div>
    </BrowserRouter>
  );
}

export default App;

위의 예제에서는 CustomRoute 컴포넌트를 만들어 라우트를 확장하고 있습니다. 이 컴포넌트는 Route 컴포넌트를 래핑하여 특정 경로에 대한 추가적인 컨텐츠를 정의합니다. 이를 통해 라우트를 훨씬 유연하게 확장할 수 있습니다.

동적 라우트 설정

리액트 라우터는 동적 라우트를 설정하는 기능도 제공합니다. 동적 라우트는 URL의 일부를 변수로 사용하여 라우트를 동적으로 생성하는 것을 의미합니다. 다음은 동적 라우트를 설정하는 예제입니다.

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

function UserPage({ match }) {
  return <h1>User Page: {match.params.username}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/user/john">John's Profile</Link>
          </li>
          <li>
            <Link to="/user/jane">Jane's Profile</Link>
          </li>
        </ul>
        <Route path="/user/:username" component={UserPage} />
      </div>
    </BrowserRouter>
  );
}

export default App;

위의 예제에서는 :username을 URL의 변수로 사용하여 동적 라우트를 설정하고 있습니다. UserPage 컴포넌트에서 match.params.username을 통해 사용자명을 가져올 수 있습니다.

리액트 라우터를 사용하여 다중 페이지를 지원하고 확장하는 방법에 대해 알아보았습니다. 이를 통해 리액트 애플리케이션에서 다양한 페이지를 구성할 수 있습니다. 추가적으로 라우트의 보안과 인증에 대한 기능들을 적용해보는 것도 좋은 방법입니다.

참고 자료

React Router Documentation

목차

다중 페이지 지원

라우트 확장

동적 라우트 설정

참고 자료