React Router를 활용한 다중 페이지 애플리케이션 만들기: 메뉴와 라우트 설정을 통한 SPA 구현.

작성일 : 2024-06-27

React Router를 활용한 다중 페이지 애플리케이션 만들기: 메뉴와 라우트 설정을 통한 SPA 구현

React는 웹 애플리케이션 개발에 있어 강력한 도구이며, 그 중에서도 React Router는 단일 페이지 애플리케이션(SPA)을 구현하는 데 핵심적인 역할을 합니다. 이 블로그 포스트에서는 React Router를 사용해 다중 페이지 애플리케이션을 만드는 데 필요한 기본 개념과 함께 메뉴 및 라우트 설정 방법을 설명하겠습니다.

React Router란?

React Router는 클라이언트 측 라우팅을 통해 SPA의 다양한 경로를 구성하고 관리할 수 있게 해주는 라이브러리입니다. 이를 통해 서버 요청 없이도 페이지 전환이 가능하며, 사용자 경험이 한층 향상됩니다. React Router의 주요 기능으로는 다음과 같습니다:

경로에 따라 다른 컴포넌트를 렌더링.
중첩 라우트 및 레이아웃 구성.
URL 파라미터와 쿼리스트링 관리.
히스토리 API를 활용한 네비게이션.

프로젝트 설정

React Router를 사용하기 위해 우선적으로 React 프로젝트를 생성하고 필요 패키지를 설치해야 합니다. 기본적인 React 프로젝트 설정 방법은 다음과 같습니다.

먼저 Create React App을 사용하여 프로젝트를 생성합니다:


bash
npx create-react-app my-react-app
cd my-react-app

React Router를 설치합니다:


bash
npm install react-router-dom@6

기본 라우트 설정

기본 프로젝트 설정이 완료되면, 본격적으로 라우트를 설정하겠습니다. App.js 파일을 열어 다음과 같이 구성합니다:


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

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

export default App;

이 예제에서는 Home, About, Contact와 같은 세 개의 기본 컴포넌트를 라우트로 설정하였습니다. 각 컴포넌트는 /, /about, /contact 경로에 매핑됩니다.

컴포넌트 생성

이제 각 경로에 맞는 컴포넌트를 생성해보겠습니다. src/components 디렉토리 내에 Home.js, About.js, Contact.js 파일을 만들고 다음과 같이 작성합니다.

Home.js


javascript
import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

About.js


javascript
import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

Contact.js


javascript
import React from 'react';

const Contact = () => {
  return <h2>Contact Page</h2>;
};

export default Contact;

메뉴 설정

앱 내에서 라우트를 통해 페이지 간에 쉽게 이동할 수 있도록 메뉴를 추가하겠습니다. App.js 파일에 내비게이션 링크를 추가합니다.


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

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

이제 Link 컴포넌트가 추가되어, 사용자가 Home, About, Contact 페이지를 클릭하여 이동할 수 있도록 해줍니다.

중첩 라우트

중첩 라우트는 특정 경로 내에서 하위 경로를 구성할 때 유용합니다. 예제에서는 About 페이지 내에 추가 정보를 제공하는 하위 페이지를 만들겠습니다. About.js 파일을 다음과 같이 수정합니다.


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

const AboutCompany = () => <h3>About the Company</h3>;
const AboutTeam = () => <h3>About the Team</h3>;

const About = () => {
  return (
    <div>
      <h2>About Page</h2>
      <nav>
        <ul>
          <li><Link to="about/company">Company</Link></li>
          <li><Link to="about/team">Team</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="company" element={<AboutCompany />} />
        <Route path="team" element={<AboutTeam />} />
      </Routes>
    </div>
  );
};

export default About;

동적 라우트

동적 라우트는 URL 파라미터를 포함한 경로입니다. 예를 들어 블로그 게시물의 ID에 따라 다른 내용을 보여줄 수 있습니다. 이를 위해, Post.js 컴포넌트를 만들어보겠습니다:

Post.js


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

const Post = () => {
  const { id } = useParams();
  return <h2>Post ID: {id}</h2>;
};

export default Post;

App.js에서 해당 라우트를 추가합니다:


javascript
import Post from './components/Post';

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
          <li><Link to="/post/1">Post 1</Link></li>
          <li><Link to="/post/2">Post 2</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </Router>
  );
};

export default App;

이제 Post 컴포넌트는 URL에서 id 파라미터를 받아 해당 게시물의 ID를 표시합니다. 이를 통해 동적 라우트를 구성할 수 있습니다.

결론

React Router는 SPA 구현에 있어 매우 강력한 도구입니다. 이번 글에서는 기본적인 라우트 설정에서부터 중첩 라우트, 동적 라우트 설정까지 다루었습니다. 이를 통해 단일 페이지 애플리케이션에서 여러 페이지 간의 원활한 이동을 구현할 수 있습니다. React Router를 활용한 다양한 기능을 실험해보고, 여러분의 프로젝트에 맞게 커스터마이징해보세요!