React에서 Router는 페이지 간의 이동과 URL에 따른 컴포넌트 렌더링을 관리하는 기능을 제공합니다. 일반적으로 React 애플리케이션은 단일 페이지 애플리케이션(SPA)이므로, 페이지를 이동할 때 새로고침 없이 다른 컴포넌트를 로드해 사용자 경험을 개선할 수 있습니다. 이를 위해 React Router 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 렌더링하도록 설정합니다.
React Router의 주요 개념
React Router는 페이지 라우팅을 위해 필요한 다양한 컴포넌트와 기능을 제공합니다. 가장 기본적인 기능은 경로(path)와 이에 맞는 컴포넌트 매핑을 통해 URL에 따라 페이지가 변경되는 것입니다.
React Router 설치
React Router를 사용하려면 react-router-dom 패키지를 설치해야 합니다.
npm install react-router-dom1. BrowserRouter와 HashRouter
React Router에는 두 가지 라우터가 있습니다:
- BrowserRouter: HTML5의 히스토리 API를 사용하여 브라우저의 URL을 조작합니다. 보통 일반적인 웹 애플리케이션에서 사용됩니다.
- HashRouter: URL에 해시(#)를 포함하여 경로를 지정합니다. 서버 설정이 없는 경우나 GitHub Pages 등과 같이 URL 기반 라우팅이 제한된 환경에서 주로 사용됩니다.
일반적으로, SPA 애플리케이션에서는 BrowserRouter를 많이 사용합니다.
import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
{/* 라우트 설정 */}
</Router>
);
}
export default App;2. Route와 Routes
Route는 URL 경로에 따라 특정 컴포넌트를 렌더링합니다. Routes 컴포넌트는 여러 Route를 감싸는 컨테이너 역할을 하며, 현재 URL에 맞는 첫 번째 Route만 렌더링합니다.
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;설명:
- path="/"는 루트 URL(localhost:3000/)에서 Home 컴포넌트를 렌더링합니다.
- path="/about"는 /about URL(localhost:3000/about)에서 About 컴포넌트를 렌더링합니다.
- element={<Component />} 속성은 경로에 따라 렌더링할 컴포넌트를 지정합니다.
3. 링크 생성하기 - Link와 NavLink
React Router에서는 페이지 전환 시 브라우저를 새로고침하지 않고 이동하도록 Link와 NavLink 컴포넌트를 제공합니다.
- Link: 클릭 시 지정된 경로로 이동합니다. 일반적으로 <a> 태그를 대체하며, 새로고침 없이 페이지 이동을 수행합니다.
- NavLink: Link와 비슷하지만, 현재 활성화된 경로에 따라 스타일을 변경할 수 있는 추가 기능을 제공합니다.
import { Link, NavLink } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<NavLink to="/about" activeClassName="active">About</NavLink>
</li>
</ul>
</nav>
);
}
export default Navbar;설명:
- Link: to 속성으로 경로를 지정하여 페이지 이동을 구현합니다.
- NavLink: activeClassName="active" 속성을 통해 현재 활성화된 경로에 active 클래스가 추가됩니다. 이를 통해 스타일을 적용할 수 있습니다.
4. 동적 라우팅 - URL 파라미터와 useParams
React Router에서는 URL의 일부를 파라미터로 받아올 수 있어, 동적인 경로를 생성하고 이를 컴포넌트에서 활용할 수 있습니다. 예를 들어, /:id와 같은 형태로 경로 변수를 사용할 수 있습니다.
예제: URL 파라미터 사용
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams(); // URL에서 id 파라미터 가져오기
return <h1>User Profile ID: {id}</h1>;
}
function App() {
return (
<Router>
<Routes>
<Route path="/user/:id" element={<UserProfile />} />
</Routes>
</Router>
);
}
export default App;설명:
- path="/user/:id": id는 URL 파라미터로, /user/123처럼 경로에 따라 동적으로 값이 변하는 부분입니다.
- useParams(): 현재 URL에서 파라미터를 추출하여 사용할 수 있습니다. 이 경우, id 값을 추출하여 해당 사용자에 맞는 프로필 페이지를 렌더링할 수 있습니다.
5. 프로그래밍 방식의 네비게이션 - useNavigate
페이지 이동을 위해 React Router에서는 useNavigate 훅을 제공합니다. useNavigate는 특정 이벤트에 따라 프로그래밍적으로 다른 페이지로 이동하도록 하는 데 유용합니다.
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
function goToProfile() {
navigate('/profile'); // 프로필 페이지로 이동
}
return (
<div>
<h1>Home Page</h1>
<button onClick={goToProfile}>Go to Profile</button>
</div>
);
}설명:
- useNavigate: navigate 함수를 반환하며, navigate(경로)를 호출하여 페이지 이동을 수행합니다.
- 조건부 네비게이션: 사용자가 특정 조건을 충족할 때 프로그래밍적으로 다른 페이지로 이동하도록 설정할 수 있습니다.
6. 중첩된 라우트
React Router에서는 중첩된 경로를 설정하여, 상위 컴포넌트 내부에 하위 컴포넌트를 렌더링할 수 있습니다. 중첩된 경로는 레이아웃 컴포넌트에 하위 페이지들을 포함할 때 유용합니다.
예제: 중첩된 라우트
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet /> {/* 하위 컴포넌트를 렌더링할 위치 */}
</div>
);
}
function Settings() {
return <h2>Settings Page</h2>;
}
function Profile() {
return <h2>Profile Page</h2>;
}
function App() {
return (
<Router>
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
</Router>
);
}
export default App;설명:
- Dashboard: Outlet을 포함하여 하위 라우트가 렌더링될 위치를 지정합니다.
- 중첩 경로: Route 내부에 Route를 중첩하여 path="settings"와 path="profile" 경로를 설정할 수 있습니다. /dashboard/settings와 /dashboard/profile로 이동할 수 있습니다.
7. Switch와 Redirect
React Router v6에서는 Switch와 Redirect가 Routes와 navigate로 대체되었습니다. Redirect 대신 useNavigate로 리다이렉트를 구현할 수 있습니다.
Redirect 대체 예제
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
function ProtectedPage() {
const navigate = useNavigate();
const isAuthenticated = false; // 인증 상태
useEffect(() => {
if (!isAuthenticated) {
navigate('/login'); // 로그인 페이지로 리다이렉트
}
}, [isAuthenticated, navigate]);
return <h1>Protected Content</h1>;
}설명:
- useEffect와 useNavigate를 사용하여 사용자가 인증되지 않았을 경우 로그인 페이지로 리다이렉트합니다.
8. 라우트 보호 - 인증된 사용자만 접근 허용
애플리케이션의 일부 페이지는 로그인한 사용자에게만 접근을 허용해야 할 수 있습니다. 이를 위해 라우트 보호 기능을 구현할 수 있습니다. React Router에서 인증된 사용자만 특정 페이지에 접근할 수 있도록 Protected Route(보호된 라우트) 패턴을 사용할 수 있습니다.
예제: 보호된 라우트 구현하기
import { Navigate, Outlet } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
}위 ProtectedRoute 컴포넌트는 isAuthenticated가 true일 경우에만 하위 컴포넌트(Outlet)를 렌더링하고, 인증되지 않은 경우 /login 페이지로 리다이렉트합니다.
사용 예시
function App() {
const isAuthenticated = false; // 인증 상태
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<ProtectedRoute isAuthenticated={isAuthenticated} />}>
<Route path="settings" element={<Settings />} />
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
</Router>
);
}설명:
- ProtectedRoute: isAuthenticated가 false라면 /login으로 리다이렉트하며, isAuthenticated가 true일 때만 하위 경로인 settings와 profile에 접근할 수 있습니다.
- Outlet: 보호된 라우트 내의 자식 경로를 렌더링하는 역할을 합니다.
9. Lazy Loading과 Suspense를 사용한 코드 분할
React Router는 Lazy Loading(지연 로딩)을 지원하여, 필요한 시점에만 페이지 컴포넌트를 로드할 수 있습니다. 이를 통해 초기 로딩 속도를 개선할 수 있습니다.
예제: React.lazy와 Suspense를 사용한 코드 분할
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}
export default App;설명:
- React.lazy: 컴포넌트를 동적으로 임포트하여 지연 로딩을 구현합니다.
- Suspense: fallback 속성을 사용하여 컴포넌트가 로드되는 동안 보여줄 로딩 화면을 정의할 수 있습니다.
Lazy Loading은 사용자가 페이지를 탐색할 때 필요한 컴포넌트만 로드하므로 애플리케이션의 초기 로딩 속도를 개선하는 데 유리합니다.
10. useLocation을 사용하여 현재 경로 확인
React Router의 useLocation 훅은 현재 경로와 관련된 정보를 제공합니다. 예를 들어, 현재 경로에 따라 다른 UI를 표시하거나, 사용자가 어떤 페이지로 이동했는지 확인할 때 유용합니다.
예제: useLocation으로 경로 기반 UI 조작하기
import { useLocation } from 'react-router-dom';
function Header() {
const location = useLocation();
return (
<header>
<h1>{location.pathname === '/' ? 'Home Page' : 'Other Page'}</h1>
</header>
);
}설명:
- location.pathname: 현재 경로를 나타냅니다. /이면 "Home Page", 그 외의 경로일 경우 "Other Page"라는 텍스트가 렌더링됩니다.
- useLocation은 검색 쿼리나 해시 등의 정보도 포함하고 있어, 페이지에서 경로 기반 상태를 관리할 때 유용합니다.
11. Query Parameters 처리하기
URL에 쿼리 파라미터를 사용하면 필터링, 검색 조건 등을 쉽게 전달할 수 있습니다. React Router에서 쿼리 파라미터는 useLocation과 URLSearchParams 객체를 통해 처리합니다.
예제: 쿼리 파라미터 읽기
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const searchTerm = queryParams.get('query'); // 쿼리 파라미터에서 'query' 값을 가져옴
return <h1>Search Term: {searchTerm}</h1>;
}설명:
- location.search: 현재 URL의 쿼리 파라미터 문자열을 가져옵니다.
- URLSearchParams: 쿼리 파라미터를 쉽게 가져오거나 조작할 수 있도록 돕는 API입니다. 예를 들어 /search?query=react URL이 주어지면 searchTerm은 "react"로 설정됩니다.
12. useSearchParams를 사용한 쿼리 파라미터 관리
React Router v6에서는 useSearchParams 훅을 통해 쿼리 파라미터를 쉽게 읽고 업데이트할 수 있습니다.
예제: useSearchParams로 쿼리 파라미터 관리
import { useSearchParams } from 'react-router-dom';
function FilterPage() {
const [searchParams, setSearchParams] = useSearchParams();
const updateFilter = (filter) => {
setSearchParams({ filter }); // 쿼리 파라미터 업데이트
};
return (
<div>
<h1>Current Filter: {searchParams.get('filter')}</h1>
<button onClick={() => updateFilter('new')}>Set Filter to 'new'</button>
</div>
);
}설명:
- useSearchParams는 배열을 반환하며, 첫 번째 요소는 현재 쿼리 파라미터를, 두 번째 요소는 쿼리 파라미터를 업데이트하는 함수입니다.
- setSearchParams를 호출하여 쿼리 파라미터를 동적으로 변경할 수 있습니다.
정리
React Router는 다음과 같은 주요 기능을 통해 SPA 애플리케이션의 라우팅을 효율적으로 관리합니다:
- BrowserRouter와 HashRouter: HTML5의 히스토리 API 또는 해시 기반 라우팅 지원.
- Route와 Routes: URL 경로와 컴포넌트를 매핑하여 페이지를 관리.
- Link와 NavLink: 네비게이션을 쉽게 구현하고 활성화된 링크에 스타일 적용.
- useNavigate: 프로그래밍 방식의 페이지 이동.
- Protected Route: 인증 상태에 따라 접근을 제한하는 보호된 경로.
- Lazy Loading과 Suspense: 페이지 로딩 성능 개선.
- useLocation, useParams, useSearchParams: URL 정보와 쿼리 파라미터를 활용하여 경로 기반 상태 관리.
React Router를 통해 URL 경로에 맞는 컴포넌트를 효과적으로 렌더링하고, 유연한 네비게이션 기능을 구현할 수 있습니다. 이를 통해 React 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다.
'React' 카테고리의 다른 글
| state, useState (0) | 2024.11.11 |
|---|---|
| Hook (0) | 2024.11.11 |
| Context API (0) | 2024.11.11 |
| props (0) | 2024.11.11 |
| React Event Handling (0) | 2024.11.11 |