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

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

React Router 실전 사용법을 제대로 익히면 단일 페이지 애플리케이션(SPA)에서 페이지 전환을 자유자재로 구현할 수 있습니다. 현대 웹 개발에서 React는 가장 인기 있는 프론트엔드 라이브러리 중 하나이며, React Router는 React 생태계에서 라우팅을 담당하는 표준 라이브러리입니다. 본 튜토리얼에서는 React Router의 기초부터 실전 프로젝트에 바로 적용할 수 있는 고급 기법까지 단계별로 학습합니다. 실무에서 자주 사용되는 중첩 라우팅, 동적 라우팅, 프로그래매틱 네비게이션, 라우트 가드 등을 코드 예제와 함께 상세히 다룹니다.

2. 기본 개념 설명

React Router는 클라이언트 사이드 라우팅을 구현하여 페이지 새로고침 없이 URL에 따라 다른 컴포넌트를 렌더링합니다. 주요 개념으로는 BrowserRouter, Routes, Route, Link, Navigate 등이 있습니다. BrowserRouter는 HTML5 History API를 사용하여 라우팅을 관리하는 최상위 컴포넌트입니다. Routes는 여러 Route를 감싸는 컨테이너이며, Route는 특정 경로와 컴포넌트를 매핑합니다. Link 컴포넌트는 페이지 새로고침 없이 경로를 변경하며, Navigate는 리다이렉션을 처리합니다. React Router v6에서는 Switch가 Routes로 변경되었고, component 속성 대신 element 속성을 사용합니다. useNavigate, useParams, useLocation과 같은 훅을 통해 라우팅 정보에 접근하고 제어할 수 있습니다. 이러한 기본 개념을 이해하면 복잡한 라우팅 구조도 쉽게 구현할 수 있습니다.

3. 단계별 구현 가이드

3-1. 설치 및 초기 설정

먼저 React 프로젝트를 생성하고 React Router를 설치합니다. npm 또는 yarn을 사용하여 react-router-dom 패키지를 설치하세요. 설치 후 App.js 또는 index.js에서 BrowserRouter로 전체 애플리케이션을 감싸줍니다. 이것이 React Router를 사용하기 위한 첫 번째 단계입니다.

3-2. 기본 라우트 구성

Routes와 Route 컴포넌트를 사용하여 기본 라우팅을 구성합니다. 홈 페이지, 소개 페이지, 연락처 페이지 등 각 경로에 맞는 컴포넌트를 매핑하세요. Route의 path 속성에 URL 경로를, element 속성에 렌더링할 컴포넌트를 JSX 형태로 전달합니다. 예를 들어 path=’/’는 루트 경로를, path=’/about’는 소개 페이지를 나타냅니다.

3-3. 네비게이션 구현

Link 컴포넌트를 사용하여 네비게이션 메뉴를 만듭니다. 전통적인 a 태그 대신 Link를 사용하면 페이지 새로고침 없이 부드러운 전환이 가능합니다. NavLink를 사용하면 현재 활성화된 링크에 스타일을 적용할 수 있어 UX를 향상시킵니다. to 속성에 이동할 경로를 지정하고, activeClassName이나 style 함수로 활성 상태를 표시합니다.

3-4. 동적 라우팅 설정

URL 파라미터를 사용하여 동적 라우팅을 구현합니다. path=’/user/:id’와 같이 콜론(:)을 사용하여 동적 세그먼트를 정의하고, useParams 훅으로 파라미터 값을 추출합니다. 이를 통해 사용자 프로필, 상품 상세 페이지 등 동적 콘텐츠를 효율적으로 처리할 수 있습니다. 여러 파라미터를 조합하여 복잡한 URL 구조도 구현 가능합니다.

3-5. 중첩 라우팅 구현

중첩 라우팅은 레이아웃을 공유하는 페이지 구조를 만들 때 유용합니다. 부모 Route 안에 자식 Route를 배치하고, Outlet 컴포넌트로 자식 컴포넌트가 렌더링될 위치를 지정합니다. 예를 들어 대시보드 레이아웃 내에서 프로필, 설정, 통계 등의 서브 페이지를 구현할 때 중첩 라우팅을 활용합니다.

3-6. 프로그래매틱 네비게이션

useNavigate 훅을 사용하여 코드로 페이지 전환을 제어합니다. 폼 제출 후 특정 페이지로 이동하거나, 조건에 따라 다른 페이지로 리다이렉트하는 등의 상황에서 활용합니다. navigate 함수에 경로를 전달하거나, 숫자를 전달하여 히스토리 스택을 조작할 수 있습니다. navigate(-1)은 뒤로 가기, navigate(1)은 앞으로 가기를 의미합니다.

4. 실제 코드 예제와 설명

아래는 React Router 실전 사용법을 적용한 실제 코드 예제입니다.

// App.js
import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
        <Link to="/users">사용자</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function UserProfile() {
  const { id } = useParams();
  const navigate = useNavigate();
  
  const handleBack = () => {
    navigate('/');
  };
  
  return (
    <div>
      <h2>사용자 프로필: {id}</h2>
      <button onClick={handleBack}>홈으로 돌아가기</button>
    </div>
  );
}

export default App;

위 코드는 기본 라우팅, 동적 라우팅, 프로그래매틱 네비게이션을 모두 보여줍니다. useParams로 URL 파라미터를 추출하고, useNavigate로 버튼 클릭 시 페이지를 이동시킵니다. path=”*”는 정의되지 않은 모든 경로에 대한 404 페이지를 처리합니다.

5. 고급 활용 방법

Protected Routes (보호된 라우트)

인증이 필요한 페이지를 구현할 때는 보호된 라우트 패턴을 사용합니다. 커스텀 컴포넌트를 만들어 사용자의 로그인 상태를 확인하고, 인증되지 않은 경우 로그인 페이지로 리다이렉트합니다.

function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth(); // 커스텀 훅
  return isAuthenticated ? children : <Navigate to="/login" />;
}

Lazy Loading

React.lazy와 Suspense를 조합하여 라우트 기반 코드 스플리팅을 구현합니다. 이를 통해 초기 로딩 시간을 줄이고 성능을 최적화할 수 있습니다.

const Dashboard = React.lazy(() => import('./Dashboard'));

<Route path="/dashboard" element={
  <Suspense fallback={<div>로딩중...</div>}>
    <Dashboard />
  </Suspense>
} />

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

이 튜토리얼을 통해 React Router 실전 사용법의 핵심 개념과 실무 적용 방법을 학습했습니다. 기본 라우팅부터 동적 라우팅, 중첩 라우팅, 보호된 라우트까지 다양한 패턴을 익혔다면 이제 실제 프로젝트에 적용해보세요. 추가 학습을 위해서는 React Router 공식 문서(reactrouter.com)를 참고하고, React Router v6의 새로운 기능과 마이그레이션 가이드를 확인하세요. 또한 TypeScript와 함께 사용하는 방법, React Query와의 통합, 상태 관리 라이브러리와의 조합 등 고급 주제도 탐구해보시기 바랍니다.