React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(9)

React Router를 통한 페이지 이동: SPA 구현

이번 강의에서는 React Router를 사용하여 **Single Page Application(SPA)**을 구현하는 방법을 다룹니다. React Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리할 수 있게 도와주는 라이브러리입니다.

React Router를 통한 페이지 이동

---

1. React Router 설치

React Router는 React에서 라우팅 기능을 제공하는 라이브러리입니다. 이 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 렌더링할 수 있습니다.

1.1 React Router 설치

프로젝트 폴더에서 다음 명령어로 React Router를 설치합니다.

npm install react-router-dom

 

---

2. 기본 라우팅 설정

이제 React Router를 사용해 간단한 라우팅 설정을 해보겠습니다. 기본적으로 BrowserRouter, Routes, Route 컴포넌트를 사용하여 경로에 따라 다른 페이지를 렌더링할 수 있습니다.

2.1 App.js에서 라우팅 설정

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <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>

        {/* Routes 설정 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

2.2 코드 설명

• BrowserRouter: Router 컴포넌트는 브라우저 히스토리 API를 사용하여 페이지 이동을 관리합니다.
• Routes: 각 경로에 따라 다른 컴포넌트를 렌더링하는 역할을 합니다.
• Route: 특정 경로에 따라 렌더링할 컴포넌트를 설정합니다.
• Link: React Router에서 페이지를 이동할 때 사용하는 컴포넌트입니다. 브라우저의 기본 동작인 페이지 새로고침 없이도 경로를 변경할 수 있습니다.

---

3. 여러 페이지로 구성된 SPA 만들기

React Router를 사용해 간단한 SPA(Single Page Application)를 구현해 보겠습니다. 각 페이지 컴포넌트를 만들어서 다양한 경로에 맞게 렌더링합니다.

3.1 Home.js (홈 페이지)

// pages/Home.js
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <p>This is the home page of our React Router example.</p>
    </div>
  );
}

export default Home;

3.2 About.js (소개 페이지)

// pages/About.js
import React from 'react';

function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page where we describe our application.</p>
    </div>
  );
}

export default About;

3.3 Contact.js (연락처 페이지)

// pages/Contact.js
import React from 'react';

function Contact() {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>This is the contact page where users can find our contact details.</p>
    </div>
  );
}

export default Contact;

3.4 코드 설명

• 각 페이지는 별도의 컴포넌트로 구성되어 있습니다.
• Route 컴포넌트를 사용해 특정 경로에 접근할 때 각각의 컴포넌트가 렌더링됩니다.

---

4. SPA의 장점

**Single Page Application(SPA)**는 브라우저에서 페이지가 새로고침되지 않고, 컴포넌트 단위로 화면이 업데이트되는 방식입니다. 이는 사용자 경험을 향상시키고, 페이지 로딩 속도를 개선하는데 효과적입니다.

4.1 SPA의 주요 장점

• 빠른 페이지 로드: 서버로부터 전체 페이지를 다시 로드할 필요 없이 필요한 데이터만 교환하여 사용자 경험을 빠르게 합니다.
• 원활한 페이지 전환: React Router를 사용하면 브라우저의 새로고침 없이 페이지 간의 부드러운 전환이 가능합니다.
• 유연한 개발 구조: 컴포넌트 단위로 각 페이지를 개발할 수 있어 재사용성과 유지보수가 용이합니다.

---

5. 프로젝트 구조

React Router를 사용한 기본 프로젝트 구조는 다음과 같습니다:

my-app/
│
├── src/
│   ├── pages/
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── App.js
│   ├── index.js
│   └── ...

각 페이지 컴포넌트는 pages 폴더에 따로 분리하여 관리하고, App.js에서는 경로에 맞게 컴포넌트를 렌더링합니다.

---

결론

이번 강의에서는 React Router를 사용해 **SPA(Single Page Application)**를 만드는 방법을 배웠습니다. React Router를 사용하면 여러 페이지로 구성된 애플리케이션에서 페이지 간의 이동을 쉽게 구현할 수 있으며, 페이지 새로고침 없이도 빠르고 원활한 사용자 경험을 제공합니다.