티스토리 뷰
React로 화면을 만들기 시작하면 금방 부딪히는 주제가 바로 페이지 이동입니다.
처음에는 컴포넌트 하나만 띄우면 되지만, 조금만 기능이 늘어나도 아래처럼 궁금해집니다.
- 홈 화면에서 상세 페이지로 어떻게 이동하는가?
- URL이 바뀌어도 새로고침 없이 화면이 바뀌는 이유는 무엇인가?
- React에서 페이지 이동은 a 태그로 하면 안 되는가?
- React Router는 어떻게 설치하고 적용하는가?
이번 글에서는 React 입문자가 가장 많이 찾는 React Router 사용법을 기준으로, 기본 라우팅 설정 → 페이지 이동 → Link 사용법 → useNavigate 활용까지 한 번에 정리하겠습니다.
React는 기본적으로 하나의 페이지 안에서 컴포넌트를 바꾸며 동작하는 경우가 많습니다. 이때 URL 경로에 따라 다른 화면을 보여주고 싶다면 라우팅이 필요합니다.
React Router는 이 라우팅을 담당하는 대표 라이브러리입니다.
예를 들어 아래처럼 생각하면 쉽습니다.
/→ 홈 화면/about→ 소개 화면/products→ 상품 목록 화면/products/1→ 상품 상세 화면
즉, React Router는 URL 경로와 컴포넌트를 연결해 주는 도구라고 보면 됩니다.
React Router의 핵심은 “페이지를 새로 여는 것”보다 경로에 따라 어떤 컴포넌트를 보여줄지 관리하는 것입니다.
일반 HTML에서는 페이지 이동에 <a> 태그를 사용합니다. 하지만 React 앱에서는 <a> 태그를 그대로 쓰면 보통 전체 페이지가 다시 로드될 수 있습니다.
반면 React Router의 Link를 사용하면 필요한 화면만 자연스럽게 바뀌고, 싱글 페이지 애플리케이션(SPA) 흐름도 유지할 수 있습니다.
보통 React Router는 아래 명령어로 설치합니다.
npm install react-router-dom
설치가 끝나면 프로젝트에서 BrowserRouter, Routes, Route, Link, useNavigate 같은 기능을 사용할 수 있습니다.
가장 기본적인 라우팅 코드는 아래처럼 구성할 수 있습니다.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function Home() {
return <h2>홈 페이지</h2>;
}
function About() {
return <h2>소개 페이지</h2>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
이 코드는 아래처럼 동작합니다.
/경로로 들어오면 Home 컴포넌트를 보여주고/about경로로 들어오면 About 컴포넌트를 보여줍니다.
즉, Route는 경로(path)와 화면(element)을 연결하는 규칙입니다.
사용자가 메뉴를 클릭해서 이동하도록 만들려면 Link를 많이 씁니다.
import { Link } from 'react-router-dom';
function Menu() {
return (
<nav>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
</nav>
);
}
여기서 중요한 점은 href가 아니라 to 속성을 사용한다는 것입니다.
<a href="/about">가 아니라<Link to="/about">를 사용합니다.
이 패턴은 헤더 메뉴, 사이드바, 목록 페이지 이동 등 거의 모든 기본 이동에서 자주 쓰입니다.
클릭 링크가 아니라, 특정 로직 이후 자동으로 이동시키고 싶을 때는 useNavigate를 많이 씁니다.
예를 들어 로그인 성공 후 메인 페이지로 보내는 경우가 대표적입니다.
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => {
// 로그인 처리
navigate('/');
};
return <button onClick={handleLogin}>로그인</button>;
}
이 코드는 버튼을 누른 뒤 navigate('/')를 실행해 홈 화면으로 이동합니다.
즉, useNavigate는 이벤트 처리나 조건 처리 후 코드로 이동시킬 때 유용합니다.
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';
function Home() {
return <h2>홈 화면</h2>;
}
function About() {
return <h2>소개 화면</h2>;
}
function Login() {
const navigate = useNavigate();
const handleLogin = () => {
navigate('/');
};
return <button onClick={handleLogin}>로그인 후 홈으로 이동</button>;
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
<Link to="/login">로그인</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;
이 코드 하나만 이해해도 React Router 입문 흐름은 꽤 잘 잡힙니다.
BrowserRouter로 전체를 감싸지 않으면 라우팅이 동작하지 않을 수 있습니다.Link는href가 아니라to를 사용합니다.Route는component가 아니라element형태로 넣는 버전을 많이 사용합니다.- 내부 이동은 Link, 코드 이동은 useNavigate로 구분하면 이해가 쉽습니다.
입문 예제에서는 App.jsx 안에 모든 라우트를 작성해도 괜찮지만, 실제 프로젝트에서는 화면이 늘어나면서 구조 분리가 중요해집니다.
예를 들어 아래처럼 나누는 방식이 많이 쓰입니다.
src/
├─ pages/
│ ├─ Home.jsx
│ ├─ About.jsx
│ ├─ Login.jsx
│ └─ ProductDetail.jsx
├─ layouts/
│ └─ MainLayout.jsx
├─ router/
│ └─ index.jsx
└─ App.jsx
이 구조의 핵심은 아래와 같습니다.
- pages = 실제 라우트로 연결되는 화면 단위
- layouts = 공통 헤더, 사이드바, 푸터 같은 골격
- router = 경로 정의를 한곳에서 관리
페이지마다 헤더와 푸터를 반복해서 넣기보다, 공통 레이아웃 하나를 만들고 그 안에 각 페이지를 끼워 넣는 방식이 더 실용적입니다. 이때 자주 사용하는 것이 Outlet입니다.
import { Outlet, Link } from 'react-router-dom';
function MainLayout() {
return (
<div>
<header>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
</header>
<main>
<Outlet />
</main>
</div>
);
}
그리고 라우터는 아래처럼 구성할 수 있습니다.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<MainLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
</Route>
</Routes>
</BrowserRouter>
);
}
이 구조에서는 MainLayout이 공통 골격이 되고, Outlet 위치에 Home이나 About이 들어갑니다.
실무에서는 단순 라우트 나열보다 공통 레이아웃 + Outlet 구조가 훨씬 많이 쓰입니다.
예를 들어 마이페이지 아래에 주문내역, 회원정보, 찜 목록이 있다고 가정해보겠습니다.
<Route path="/mypage" element={<MyPageLayout />}>
<Route index element={<MyPageHome />} />
<Route path="orders" element={<OrderList />} />
<Route path="profile" element={<Profile />} />
</Route>
이런 구조를 쓰면 /mypage, /mypage/orders, /mypage/profile처럼 하위 경로를 자연스럽게 연결할 수 있습니다.
즉, 중첩 라우팅은 단순히 복잡한 문법이 아니라 관련 있는 페이지를 한 구조 안에서 묶는 방식입니다.
실무에서는 상품 목록, 게시글 목록, 회원 목록처럼 리스트에서 상세 페이지로 넘어가는 흐름이 많습니다. 이때 자주 쓰는 것이 URL 파라미터입니다.
import { useParams } from 'react-router-dom';
function ProductDetail() {
const { productId } = useParams();
return <div>상품 상세 ID: {productId}</div>;
}
라우트는 아래처럼 연결합니다.
<Route path="/products/:productId" element={<ProductDetail />} />
예를 들어 /products/10으로 들어가면 productId가 10으로 읽힙니다.
이 패턴은 아래처럼 정말 자주 쓰입니다.
- 게시글 상세 보기
- 상품 상세 페이지
- 유저 프로필 페이지
- 주문 상세 페이지
관리자 페이지나 마이페이지는 로그인하지 않은 사용자가 접근하면 안 되는 경우가 많습니다. 이럴 때는 보호 라우트(Protected Route) 패턴을 많이 씁니다.
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isLogin, children }) {
if (!isLogin) {
return <Navigate to="/login" replace />;
}
return children;
}
사용 예시는 아래처럼 볼 수 있습니다.
<Route
path="/mypage"
element={
<ProtectedRoute isLogin={isLogin}>
<MyPage />
</ProtectedRoute>
}
/>
이 구조는 “조건이 맞지 않으면 다른 경로로 보내는 라우팅 제어”라는 점에서 실무 활용도가 높습니다.
경로가 잘못 들어왔을 때 빈 화면이 나오면 사용자 경험이 좋지 않습니다. 그래서 실무에서는 보통 404 페이지를 같이 둡니다.
function NotFound() {
return <h2>404 - 페이지를 찾을 수 없습니다.</h2>;
}
<Route path="*" element={<NotFound />} />
이렇게 해두면 정의되지 않은 경로로 접근했을 때 안내 화면을 보여줄 수 있습니다.
React Router를 배울 때 흐름을 아래처럼 잡으면 기초와 심화가 자연스럽게 이어집니다.
- 기본 라우트 연결
- Link와 useNavigate로 이동 방식 이해
- 레이아웃 라우트와 Outlet 이해
- 중첩 라우팅으로 구조화
- useParams로 상세 페이지 연결
- Protected Route와 404 처리까지 확장
즉, 실무형 React Router는 단순히 페이지 이동만 되는 상태가 아니라 공통 레이아웃, 하위 구조, 상세 페이지, 접근 제어, 예외 처리까지 포함한 화면 구조 설계라고 보는 편이 맞습니다.
기본 라우팅까지 이해했다면 다음으로는 아래 주제들이 자연스럽게 이어집니다.
- 중첩 라우팅
- 동적 URL 파라미터
- 404 페이지 처리
- 레이아웃 라우트
- 인증 라우팅
즉, 이번 글은 React Router 입문의 출발점이면서, 실무 구조로 확장되는 연결 지점이라고 보면 됩니다.
npm install react-router-dom- Q. React에서 페이지 이동은 무조건 Link로 해야 하나요?
→ 클릭 메뉴 이동은 보통 Link를, 로그인 후 이동이나 조건 처리 뒤 이동은 useNavigate를 더 많이 씁니다. - Q. a 태그를 쓰면 왜 안 좋은가요?
→ 내부 이동에서 a 태그를 쓰면 SPA 흐름이 깨지고 전체 페이지가 다시 로드될 수 있습니다. - Q. React Router를 배우면 다음에 뭘 보면 좋나요?
→ 중첩 라우팅, Outlet, useParams, 보호 라우트, 404 처리 순서로 확장해가면 좋습니다.
React Router를 이해하면 이후 페이지 구조 설계, 인증 흐름, 레이아웃 분리까지 훨씬 자연스럽게 이어집니다.
'Front > React' 카테고리의 다른 글
| React useEffect 사용법 정리 | 실행 시점, 의존성 배열, API 호출까지 (0) | 2026.04.03 |
|---|---|
| React 리눅스 서버 배포 방법 | build 파일 업로드부터 실제 서비스 적용까지 (0) | 2026.04.03 |
| React JSX 문법 정리 | 기본 문법, 조건부 렌더링, 리스트 렌더링까지 (0) | 2026.04.02 |
| React 프로젝트 구조 정리 | src, public, components 폴더 역할 쉽게 이해하기 (0) | 2026.04.01 |
| React 설치 및 개발환경 세팅 방법 | Node.js 설치부터 프로젝트 생성까지 (1) | 2026.04.01 |