frontend/react

[React] React.js 강좌 12. React Router 완벽 가이드 – 라우팅의 기본부터 동적 라우팅까지

mirabo01 2025. 11. 10. 08:52

1. 라우팅이란 무엇인가?

웹 애플리케이션에서 “라우팅(Routing)”이란 URL에 따라 다른 화면을 보여주는 기술을 말합니다.
전통적인 웹에서는 사용자가 페이지를 클릭할 때마다 서버가 HTML 파일을 새로 보내주지만,
리액트는 SPA(Single Page Application) 방식이므로 한 개의 페이지에서 URL만 바꿔가며 화면을 교체합니다.

이 과정을 도와주는 라이브러리가 바로 React Router입니다.

2. React Router 설치

리액트 라우터는 현재 react-router-dom 패키지로 제공됩니다.

npm install react-router-dom

설치 후, 프로젝트 내에서 다음과 같이 불러올 수 있습니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

3. 기본 라우팅 구조

리액트 앱에서는 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';

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

export default App;
  • / → Home 컴포넌트 표시
  • /about → About 컴포넌트 표시

한마디로, path와 컴포넌트를 연결(mapping) 하는 역할을 합니다.

4. Link – 페이지 이동

리액트에서는 <a href="..."> 대신 반드시 Link 컴포넌트를 사용해야 합니다.
그 이유는 SPA 특성상 새로고침 없이 페이지를 전환해야 하기 때문입니다.

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

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

Link는 내부적으로 history API를 사용하여 브라우저 주소만 변경하고,
페이지 전체를 다시 불러오지 않습니다.

5. useNavigate – 프로그래밍 방식의 이동

사용자가 버튼을 클릭했을 때 특정 페이지로 이동시키고 싶다면
useNavigate() 훅을 사용할 수 있습니다.

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

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

  const handleLogin = () => {
    // 로그인 성공 시 홈으로 이동
    navigate('/');
  };

  return <button onClick={handleLogin}>로그인</button>;
}

이 방식은 로그인, 로그아웃, 폼 제출 후 이동 등에 자주 사용됩니다.

6. URL 파라미터 (Dynamic Routing)

페이지마다 고유한 ID나 데이터를 표시해야 할 때가 있습니다.
예를 들어, /user/1, /user/2처럼 URL에 값을 포함시키는 경우입니다.

이때는 동적 라우팅(Dynamic Routing) 기능을 사용합니다.

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

/user/1로 접속하면, id 값이 1로 전달됩니다.
컴포넌트 안에서는 useParams()로 이 값을 받을 수 있습니다.

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

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

7. 중첩 라우팅 (Nested Routing)

복잡한 페이지 구조를 만들 때는 중첩 라우트가 유용합니다.

예를 들어, mypage 안에 여러 하위 메뉴를 구성할 수 있습니다.

<Routes>
  <Route path="/mypage" element={<MyPage />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

그리고 MyPage 컴포넌트 안에는 Outlet을 배치해야
하위 라우트가 렌더링됩니다.

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

function MyPage() {
  return (
    <div>
      <h2>마이페이지</h2>
      <Outlet />
    </div>
  );
}

8. NotFound 페이지 처리

존재하지 않는 경로에 접근했을 때 404 페이지를 보여주는 방법입니다.

<Route path="*" element={<NotFound />} />

*는 모든 경로를 의미하므로,
정의되지 않은 URL에 접근할 때 NotFound 컴포넌트를 렌더링합니다.

function NotFound() {
  return <h2>404 - 페이지를 찾을 수 없습니다.</h2>;
}

9. 라우터 버전별 주의사항

React Router v6부터는

  • Switch → Routes로 변경
  • component → element로 변경
  • useHistory → useNavigate로 변경

이전 버전의 예제 코드를 그대로 복사하면 작동하지 않을 수 있습니다.
현재는 반드시 v6 기준으로 작성해야 합니다.

10. 마무리

이번 강의에서는 리액트에서 가장 많이 사용되는 기능 중 하나인 라우팅을 다뤘습니다.
핵심 요약은 다음과 같습니다.

  • BrowserRouter로 전체를 감싸고, Route로 경로와 컴포넌트를 연결한다.
  • Link와 useNavigate로 페이지 전환을 처리한다.
  • URL 파라미터(useParams)와 중첩 라우트(Outlet)를 활용해 복잡한 구조를 표현할 수 있다.
  • 존재하지 않는 경로는 path="*"로 처리한다.

다음 강의에서는 실제 라우팅 구조에서 자주 발생하는 전역 상태 관리와 데이터 전달 문제를 해결하기 위해
Redux, Recoil, Zustand 등 상태 관리 라이브러리의 개념과 비교를 살펴보겠습니다.