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 등 상태 관리 라이브러리의 개념과 비교를 살펴보겠습니다.