React Router 실전 사용법 – 초보자도 쉽게 따라하는 완벽 가이드

1. 도입 – 학습 목표 및 필요성

이 튜토리얼에서는 React Router 실전 사용법을 처음부터 끝까지 체계적으로 배워보겠습니다. React로 단일 페이지 애플리케이션(SPA)을 개발할 때 페이지 간 이동은 필수적인 기능입니다. React Router는 이러한 라우팅 기능을 제공하는 가장 인기 있는 라이브러리로, 네비게이션 구현, URL 파라미터 처리, 중첩 라우팅 등 실무에서 필요한 모든 기능을 제공합니다. 이 가이드를 통해 React Router의 핵심 개념부터 고급 활용법까지 실전에서 바로 적용할 수 있는 지식을 습득하게 될 것입니다. 초보자도 따라할 수 있도록 단계별로 상세하게 설명하며, 실무 프로젝트에 즉시 활용 가능한 코드 예제를 제공합니다.

2. 기본 개념 설명

React Router는 클라이언트 사이드 라우팅을 구현하는 라이브러리입니다. 전통적인 웹사이트와 달리 SPA에서는 페이지 전환 시 서버에 새로운 HTML을 요청하지 않고, JavaScript로 화면을 동적으로 변경합니다. React Router v6는 이전 버전보다 API가 간결해지고 성능이 향상되었습니다.

핵심 컴포넌트:

• BrowserRouter: HTML5 History API를 사용하여 라우팅을 관리하는 최상위 컴포넌트입니다.
• Routes와 Route: URL 경로와 컴포넌트를 매칭시키는 역할을 합니다.
• Link와 NavLink: 페이지 이동을 위한 링크 컴포넌트로, a 태그와 달리 페이지 새로고침 없이 이동합니다.
• useNavigate: 프로그래밍 방식으로 페이지 이동을 제어하는 훅입니다.
• useParams: URL 파라미터를 추출하는 훅입니다.
• Outlet: 중첩 라우트의 자식 컴포넌트를 렌더링하는 위치를 지정합니다.

3. 단계별 구현 가이드

3-1. 설치 및 프로젝트 설정

먼저 React 프로젝트를 생성하고 React Router를 설치합니다:

npx create-react-app my-router-app
cd my-router-app
npm install react-router-dom

3-2. 기본 라우터 설정

React Router 실전 사용법의 첫 단계는 기본 라우터를 설정하는 것입니다. src/App.js 파일을 다음과 같이 수정합니다:

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. 네비게이션 메뉴 생성

사용자가 페이지 간 이동할 수 있도록 네비게이션 컴포넌트를 만듭니다:

// src/components/Navigation.js
import { Link, NavLink } from 'react-router-dom';
import './Navigation.css';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink 
            to="/" 
            className={({ isActive }) => isActive ? 'active' : ''}
          >
            홈
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/about" 
            className={({ isActive }) => isActive ? 'active' : ''}
          >
            소개
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/contact" 
            className={({ isActive }) => isActive ? 'active' : ''}
          >
            연락처
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

3-4. 동적 라우팅 구현

URL 파라미터를 활용한 동적 라우팅은 실무에서 가장 많이 사용되는 패턴입니다:

// App.js에 추가
<Route path="/products/:id" element={<ProductDetail />} />

// src/pages/ProductDetail.js
import { useParams, useNavigate } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams();
  const navigate = useNavigate();

  const handleGoBack = () => {
    navigate(-1); // 이전 페이지로 이동
  };

  return (
    <div>
      <h1>제품 상세 페이지</h1>
      <p>제품 ID: {id}</p>
      <button onClick={handleGoBack}>뒤로 가기</button>
    </div>
  );
}

export default ProductDetail;

3-5. 중첩 라우트 활용

복잡한 레이아웃을 구성할 때 중첩 라우트는 매우 유용합니다:

// App.js
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

// src/pages/DashboardLayout.js
import { Outlet, Link } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <Link to="/dashboard">홈</Link>
        <Link to="/dashboard/profile">프로필</Link>
        <Link to="/dashboard/settings">설정</Link>
      </aside>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

4. 실제 코드 예제와 설명

404 페이지 처리

존재하지 않는 경로로 접근했을 때 표시할 404 페이지를 구현합니다:

// App.js
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

// src/pages/NotFound.js
import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>404 - 페이지를 찾을 수 없습니다</h1>
      <p>요청하신 페이지가 존재하지 않습니다.</p>
      <Link to="/">홈으로 돌아가기</Link>
    </div>
  );
}

쿼리 파라미터 처리

검색 기능이나 필터링에 자주 사용되는 쿼리 파라미터 처리 방법입니다:

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const category = searchParams.get('category') || 'all';

  const handleSearch = (newQuery) => {
    setSearchParams({ q: newQuery, category });
  };

  return (
    <div>
      <h1>검색 결과: {query}</h1>
      <p>카테고리: {category}</p>
    </div>
  );
}

프로그래매틱 네비게이션

폼 제출 후 이동하거나 조건부 리다이렉션이 필요할 때 사용합니다:

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

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 로그인 로직
    const success = await login();
    
    if (success) {
      navigate('/dashboard', { replace: true });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 폼 필드 */}
    </form>
  );
}

5. 고급 활용 방법

보호된 라우트 구현

React Router 실전 사용법에서 빠질 수 없는 것이 인증이 필요한 페이지 보호입니다:

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const isAuthenticated = checkAuth(); // 인증 상태 확인

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

// App.js에서 사용
<Route 
  path="/dashboard" 
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  } 
/>

Lazy Loading으로 성능 최적화

코드 스플리팅을 활용하여 초기 로딩 속도를 개선합니다:

import { lazy, Suspense } from 'react';

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>
  );
}

useLocation으로 페이지 전환 추적

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function Analytics() {
  const location = useLocation();

  useEffect(() => {
    // 페이지 뷰 추적
    console.log('Page view:', location.pathname);
    // Google Analytics 등에 전송
  }, [location]);

  return null;
}

6. 마무리 및 추가 학습 자료

이 튜토리얼을 통해 React Router 실전 사용법의 핵심 개념과 실전 활용법을 모두 학습했습니다. 기본 라우팅부터 동적 라우팅, 중첩 라우트, 보호된 라우트, 성능 최적화까지 실무에서 필요한 모든 기능을 다뤘습니다. 이제 여러분의 프로젝트에 바로 적용해보세요.

추가 학습 자료:

• React Router 공식 문서: https://reactrouter.com
• React Router v6 마이그레이션 가이드
• React Router와 TypeScript 함께 사용하기
• Server-Side Rendering과 React Router

실습을 통해 익히는 것이 가장 중요합니다. 작은 프로젝트부터 시작하여 점진적으로 복잡한 라우팅 구조를 만들어보세요. React Router 실전 사용법을 마스터하면 어떤 규모의 애플리케이션도 자신 있게 개발할 수 있습니다!