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

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

React Router 실전 사용법을 제대로 익히면 단일 페이지 애플리케이션(SPA)에서 여러 페이지를 자연스럽게 구현할 수 있습니다. 현대 웹 개발에서 React Router는 필수 라이브러리로 자리잡았으며, 사용자 경험을 향상시키는 핵심 도구입니다. 이 튜토리얼을 통해 기본 라우팅 설정부터 동적 라우팅, 중첩 라우트, 보호된 라우트까지 실전에서 바로 활용할 수 있는 모든 기술을 배우게 됩니다. 초보자도 따라할 수 있도록 단계별로 구성했으며, 실무에서 자주 사용되는 패턴들을 중점적으로 다룹니다.

2. 기본 개념 설명

React Router는 React 애플리케이션에서 라우팅을 담당하는 라이브러리입니다. 전통적인 웹사이트는 페이지 이동 시 서버에서 새로운 HTML을 불러오지만, React Router를 사용하면 페이지 새로고침 없이 URL에 따라 다른 컴포넌트를 렌더링할 수 있습니다. 주요 개념으로는 BrowserRouter(라우터 전체를 감싸는 컨테이너), Routes(여러 Route를 그룹화), Route(특정 경로와 컴포넌트를 매핑), Link(페이지 이동을 위한 컴포넌트), useNavigate(프로그래밍 방식의 네비게이션), useParams(URL 파라미터 접근) 등이 있습니다. React Router v6은 이전 버전보다 간결하고 직관적인 API를 제공하며, 중첩 라우팅과 상대 경로를 더욱 쉽게 다룰 수 있습니다. 이러한 개념들을 이해하면 복잡한 네비게이션 구조도 효율적으로 구현할 수 있습니다.

3. 단계별 구현 가이드

Step 1: 프로젝트 설정 및 설치

먼저 React 프로젝트를 생성하고 React Router를 설치합니다. Create React App을 사용하거나 Vite로 프로젝트를 시작할 수 있습니다.

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

Step 2: 기본 라우터 구조 설정

App.js 파일을 열고 BrowserRouter, Routes, Route를 import합니다. BrowserRouter로 전체 애플리케이션을 감싸고, Routes 내부에 각 Route를 정의합니다. 각 Route는 path와 element prop을 가지며, path는 URL 경로, element는 렌더링할 컴포넌트를 지정합니다.

Step 3: 페이지 컴포넌트 생성

src 폴더에 pages 디렉토리를 만들고 Home.js, About.js, Contact.js 등의 페이지 컴포넌트를 생성합니다. 각 컴포넌트는 간단한 JSX를 반환하는 함수형 컴포넌트로 작성합니다. 이렇게 페이지별로 컴포넌트를 분리하면 코드 관리가 용이해집니다.

Step 4: 네비게이션 바 구현

공통으로 사용할 네비게이션 바 컴포넌트를 만듭니다. Link 컴포넌트를 사용하여 각 페이지로 이동하는 링크를 구성합니다. Link는 HTML의 a 태그와 비슷하지만 페이지 새로고침을 발생시키지 않아 SPA의 장점을 살릴 수 있습니다. to prop에 이동할 경로를 지정합니다.

Step 5: 동적 라우팅 구현

URL 파라미터를 사용하는 동적 라우트를 구현합니다. 예를 들어 /user/:id 형식의 경로를 만들고, useParams 훅을 사용하여 id 값을 추출합니다. 이를 통해 사용자 프로필, 상품 상세 페이지 등 동적 콘텐츠를 효율적으로 처리할 수 있습니다.

Step 6: 중첩 라우트 설정

대시보드처럼 하위 페이지를 가진 경우 중첩 라우트를 사용합니다. 부모 Route 내부에 자식 Route를 정의하고, 부모 컴포넌트에서 Outlet 컴포넌트를 사용하여 자식 라우트가 렌더링될 위치를 지정합니다. 이는 레이아웃을 공유하면서 내용만 바꾸는 데 유용합니다.

Step 7: 404 페이지 처리

존재하지 않는 경로로 접근할 때 보여줄 NotFound 컴포넌트를 만들고, path=”*”로 설정한 Route에 연결합니다. 이를 Routes의 마지막에 배치하면 매칭되는 경로가 없을 때 404 페이지가 표시됩니다.

4. 실제 코드 예제와 설명

다음은 React Router 실전 사용법을 보여주는 완전한 예제입니다.

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import UserProfile from './pages/UserProfile';
import NotFound from './pages/NotFound';

function App() {
  return (
    <BrowserRouter>
      <nav style={{ padding: '20px', background: '#f0f0f0' }}>
        <Link to="/" style={{ marginRight: '15px' }}>홈</Link>
        <Link to="/about" style={{ marginRight: '15px' }}>소개</Link>
        <Link to="/user/123">사용자 프로필</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

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

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

export default UserProfile;

이 예제는 기본 라우팅, 동적 라우팅(useParams), 프로그래밍 방식 네비게이션(useNavigate)을 모두 포함하고 있어 실전에서 바로 활용할 수 있습니다.

5. 고급 활용 방법

React Router 실전 사용법을 마스터하려면 고급 기능도 알아야 합니다. 첫째, Protected Routes를 구현하여 인증된 사용자만 접근할 수 있는 페이지를 만들 수 있습니다. 커스텀 컴포넌트로 인증 상태를 확인하고 조건부로 자식 컴포넌트를 렌더링하거나 로그인 페이지로 리다이렉트합니다. 둘째, useSearchParams 훅으로 쿼리 스트링을 쉽게 다룰 수 있습니다. 필터링이나 검색 기능 구현 시 유용합니다. 셋째, lazy loading과 Suspense를 결합하여 코드 스플리팅을 구현하면 초기 로딩 속도를 개선할 수 있습니다. 넷째, useLocation 훅으로 현재 경로 정보를 얻고 스크롤 복원이나 애널리틱스 추적을 구현할 수 있습니다. 마지막으로 React Router의 loader와 action을 활용하면 데이터 fetching과 form 제출을 더욱 선언적으로 처리할 수 있습니다.

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

이 튜토리얼을 통해 React Router 실전 사용법의 핵심을 모두 다뤘습니다. 기본 라우팅부터 동적 라우팅, 중첩 라우트, 프로그래밍 방식 네비게이션까지 실무에서 필요한 모든 기능을 배웠습니다. 더 깊이 학습하고 싶다면 React Router 공식 문서(reactrouter.com)를 참고하세요. 공식 튜토리얼과 API 레퍼런스가 잘 정리되어 있습니다. 또한 실제 프로젝트에 적용하면서 다양한 케이스를 경험하는 것이 가장 좋은 학습 방법입니다. 이제 배운 내용을 바탕으로 자신만의 멋진 React 애플리케이션을 만들어보세요!