React Router DOM과 MPA구조

React는 SPA(Single Page Application) 구조를 지원합니다. 그런데 일부 웹 애플리케이션은 MPA(Multi-Page Application)구조를 가집니다. 이번 글에서 React Router DOM을 사용하여 SPA구조를 어떻게 구현할지, 그리고 MPA구조와 어떻게 비교할 수 있는지를 다뤄봤습니다.

---

React Router DOM

React Router DOM은 리액트 애플리케이션에서 패이지 간에 네이게이션을 관리하는 라이브러리라고 생각하시면 됩니다. 이를 사용해서 클라이언트(사용자)쪽에서 페이지를 새로 고침하지 않아도 다른 페이지로 전환할 수 있습니다.

React Router DOM은 SPA구조에 적합하며 페이지 이동시에도 브라우저가 새로고침되지 않고, 필요한 컴퓨넌트만 렌더링하여 성능을 최적화 해줍니다.

 

사용방법은 다음과 같습니다.

1. React Router DOM 설치

npm install react-router-dom

 

2. 기본 설정

React Router DOM을 사용해서 페이지 간의 이동을 제어하려면 BrowerRouter, Route, Link 컴포넌트를 사용합니다.

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

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  </Router>
);

export default App;

여기서는 BrowerRouter(Router)로 전체 애플리케이션을 감싸고, Link로 페이지 간 네비게이션을 설정합니다. 그리고 Route는 각 url 경로에 해당하는 컴포넌트를 렌더링합니다.

---

MPA(Multi-Page Application)구조

반면 MPA구조는 각 페이지가 독립된 HTML 문서로 관리되는 방식입니다. 사용자가 다른 페이지로 이동할 때마다 서버에서 새로운 HTML파일을 받아와서 새로 렌더링합니다.
MPA는 대규모 웹 프로젝트에서 SEO나 각 페이지의 독립성 등을 고려할 때 유리합니다.

 

• SPA는 페이지 간 전환 시에 전체 페이지를 새로고침하지 않으며, React Router DOM을 사용하여 동적인 라우팅을 쉽게 구현할 수 있습니다.
• MPA는 각 페이지가 독립된 HTML문서로 관리되고, 각 페이지에서 React 애플리케이션을 독립적으로 실행할 수 있습니다.