React Router로 페이지 전환하기: SPA에서 최적의 내비게이션 구현하기

 

React는 SPA(Single Page Application)를 구현하기에 최적화된 라이브러리입니다. SPA에서 중요한 특징 중 하나는 페이지 리로드 없이 URL에 따라 다른 화면을 보여주는 기능인데, 이를 구현하는 데 사용되는 대표적인 라이브러리가 바로 React Router입니다. 이번 글에서는 React Router를 활용해 페이지 전환을 구현하는 방법을 자세히 알아보겠습니다.

---

1. React Router란?

React Router는 React 애플리케이션에서 **클라이언트 측 라우팅(Client-side Routing)**을 가능하게 하는 라이브러리입니다. 브라우저의 주소(URL)를 감지하고 이에 맞는 컴포넌트를 렌더링하여 페이지 리로드 없이도 동적인 화면 전환이 가능합니다.

React Router의 주요 기능:

• URL에 따라 다른 컴포넌트 렌더링
• 동적 라우팅 및 중첩 라우트 지원
• 네비게이션 기능(뒤로 가기, 앞으로 가기 등)
• 쿼리스트링 및 파라미터 관리
• 코드 스플리팅을 통한 성능 최적화

---

2. React Router 기본 설치 및 설정

2.1 설치

React Router를 사용하려면 react-router-dom 패키지를 설치해야 합니다. 아래 명령어를 통해 설치합니다.

npm install react-router-dom

2.2 프로젝트에 적용하기

React Router를 적용하려면 BrowserRouter, Routes, Route 컴포넌트를 활용해야 합니다.

예제: 기본 라우팅 구조 설정

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

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

export default App;

---

3. 주요 컴포넌트와 활용법

3.1 BrowserRouter

• React Router의 최상위 컴포넌트로, 애플리케이션 전체를 라우팅 가능하게 만듭니다.
• 브라우저의 히스토리 API를 사용해 URL 변화를 감지합니다.

3.2 Routes와 Route

• Routes: 여러 개의 Route를 감싸며 URL에 따라 조건부 렌더링을 수행합니다.
• Route: 각 URL 경로와 해당 컴포넌트를 연결합니다.
  • path 속성: URL 경로를 정의
  • element 속성: 렌더링할 컴포넌트

동적 라우팅

path에 동적 파라미터를 설정하여 경로에 따라 데이터를 다르게 렌더링할 수 있습니다.

<Route path="/user/:id" element={<User />} />

useParams로 파라미터 가져오기

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

function User() {
  const { id } = useParams();
  return <div>사용자 ID: {id}</div>;
}

---

4. 네비게이션 구현하기

React Router에서 페이지 이동은 Link 또는 useNavigate 훅을 사용합니다.

4.1 Link 컴포넌트

Link는 HTML의 <a> 태그와 비슷한 역할을 하지만, 페이지를 리로드하지 않고도 경로를 변경합니다.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
      <Link to="/contact">연락처</Link>
    </nav>
  );
}

4.2 useNavigate 훅

useNavigate 훅을 사용하면 프로그래밍 방식으로 경로를 변경할 수 있습니다.

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

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

  const goToAbout = () => {
    navigate("/about");
  };

  return (
    <div>
      <h1>홈 페이지</h1>
      <button onClick={goToAbout}>소개 페이지로 이동</button>
    </div>
  );
}

---

5. 중첩 라우트와 레이아웃

React Router는 중첩 라우트를 통해 부모-자식 관계의 경로를 관리할 수 있습니다. 이를 활용하면 공통 레이아웃을 간단히 구현할 수 있습니다.

예제: 중첩 라우트 설정

import { Outlet, Link } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <nav>
        <Link to="profile">프로필</Link>
        <Link to="settings">설정</Link>
      </nav>
      <Outlet />
    </div>
  );
}

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

---

6. React Router로 코드 스플리팅하기

코드 스플리팅은 초기 로딩 속도를 개선하기 위해 필요할 때만 컴포넌트를 불러오는 방식입니다. React.lazy와 Suspense를 함께 사용합니다.

import React, { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>로딩 중...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

---

결론

React Router는 SPA에서의 내비게이션을 간단하고 효율적으로 구현할 수 있는 강력한 도구입니다. 기본적인 라우팅부터 동적 파라미터, 중첩 라우트, 코드 스플리팅까지 다양한 기능을 제공하므로, 프로젝트 요구사항에 맞게 활용할 수 있습니다.

React Router를 숙달하면 사용자 경험을 개선하고, 유지보수성이 뛰어난 웹 애플리케이션을 만들 수 있습니다. 지금 바로 프로젝트에 적용해 보세요! 🚀