리액트 애플리케이션에서 사용자가 페이지를 이동할 수 있도록 관리하는 것은 매우 중요합니다. React Router는 이러한 페이지 이동을 간편하게 구현할 수 있게 해주는 라이브러리입니다. 이를 통해 SPA(Single Page Application) 구현 시 복잡한 URL 경로를 쉽게 관리하고, 네비게이션을 수행할 수 있습니다. 이 글에서는 React Router의 기본 개념, 설치 방법, 라우팅 활용, 그리고 페이지 보호 및 인증 관련 라우팅 구현에 대해서 자세히 알아보겠습니다.
1. React Router란?
React Router는 리액트 애플리케이션에서 유연하게 라우팅을 관리할 수 있도록 도와주는 라이브러리입니다. 이를 통해 사용자는 URL에 따라 다양한 컴포넌트를 동적으로 렌더링할 수 있습니다. React Router를 사용하여 각각의 URL 경로에 컴포넌트를 매핑하고, SPA에서도 전환 시 페이지가 새로고침되지 않은 것처럼 매끄러운 사용자 경험을 제공합니다.
2. React Router 설치하기
React Router를 설치하기 위해 npm 또는 yarn을 사용할 수 있습니다. 아래와 같은 명령어로 설치할 수 있습니다:
npm install react-router-dom또는
yarn add react-router-dom3. React Router 기본 사용법
React Router의 기본적인 사용 방법을 살펴보겠습니다. 먼저, 기본적인 세팅을 위해 App.js 파일을 수정합니다.
3.1. 기본적인 라우트 구성
아래는 간단한 라우팅 예제입니다:
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
const Home = () => <h2>홈 페이지</h2>;
const About = () => <h2>소개 페이지</h2>;
const NotFound = () => <h2>404 페이지 없음</h2>;
const App = () => {
return (
<Router>
<nav>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/about">소개</Link></li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
export default App;
위 예제에서 BrowserRouter는 라우터의 최상위 컴포넌트로, Route 컴포넌트를 통해 각 경로와 컴포넌트를 매핑합니다. Switch는 하나의 경로에 대해서만 렌더링할 수 있도록 해줍니다.
3.2. URL 매개변수 사용하기
URL에 매개변수를 추가하여 동적인 라우팅을 구현할 수 있습니다. 다음은 향상된 예제입니다:
const User = ({ match }) => {
return <h2>유저 ID: {match.params.id}</h2>;
};
const App = () => {
return (
<Router>
<Switch>
<Route path="/user/:id" component={User} />
</Switch>
</Router>
);
};
위와 같이 path="/user/:id"를 설정하면 /user/1와 같은 URL에서 ID를 추출하여 해당 사용자 정보를 표시할 수 있습니다.
4. 페이지 보호 및 인증 관련 라우팅
일부 페이지는 인증된 사용자만 접근할 수 있도록 제한할 때가 많습니다. 이때는 인증 상태를 관리하고, 사용자의 권한에 따라 라우팅을 제어하는 것이 중요합니다. 다음은 페이지 보호를 구현하는 방법입니다.
4.1. 인증 상태 관리하기
우선, 간단한 인증 상태를 관리하기 위해 React의 상태 관리를 사용할 수 있습니다. 아래의 예는 인증과 로그아웃 함수를 구현하여 상태를 관리하는 방법입니다:
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect, Link } from 'react-router-dom';
const AuthContext = React.createContext();
const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const login = () => setIsAuthenticated(true);
const logout = () => setIsAuthenticated(false);
return (
<AuthContext.Provider value={{ isAuthenticated, login, logout }}>
{children}
</AuthContext.Provider>
);
};
4.2. 인증된 사용자를 위한 Route 컴포넌트 생성하기
이제 인증된 사용자만 접근할 수 있는 라우트를 구현할 차례입니다. PrivateRoute라는 컴포넌트를 생성하여 인증 상태에 따라 라우팅을 제어합니다:
const PrivateRoute = ({ component: Component, ...rest }) => {
const { isAuthenticated } = React.useContext(AuthContext);
return (
<Route {...rest} render={props =>
isAuthenticated ? <Component {...props} /> : <Redirect to="/" />
} />
);
};
4.3. 전체 라우트 구성
이제 위의 모든 요소를 조합하여 전체 애플리케이션 라우팅을 구성할 수 있습니다:
const Dashboard = () => <h2>대시보드</h2>;
const App = () => {
return (
<AuthProvider>
<Router>
<nav>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/dashboard">대시보드</Link></li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</Switch>
</Router>
</AuthProvider>
);
};
위 코드에서 사용자가 대시보드 페이지를 요청할 경우, 인증되지 않은 상태라면 홈으로 리다이렉트됩니다.
4.4. 로그인 및 로그아웃 구현하기
이제 로그인 기능을 구현하여 사용자가 인증을 받을 수 있도록 합니다:
const Login = () => {
const { login } = React.useContext(AuthContext);
const handleLogin = () => {
login();
};
return <button onClick={handleLogin}>로그인</button>;
};
4.5. 전체 애플리케이션
이제 최종적으로 모든 컴포넌트를 합친 전체 애플리케이션은 다음과 같습니다:
const App = () => {
return (
<AuthProvider>
<Router>
<nav>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/dashboard">대시보드</Link></li>
<li><Link to="/login">로그인</Link></li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" component={Login} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</Switch>
<Router>
</AuthProvider>
);
};
5. 결론
React Router는 SPA 애플리케이션에서 페이지 전환을 관리하는 강력한 도구입니다. 페이지 이동을 용이하게 하고, 조건부 렌더링을 통해 인증 및 권한 관리 기능까지 제공할 수 있습니다. 이번 글을 통해 기본적인 라우팅에서 페이지 보호 및 인증 라우팅까지 다양한 기능을 구현하는 방법을 배웠습니다. 이러한 내용은 실제 프로젝트에서도 매우 유용하게 적용될 수 있으니, 직접 실습해 보시기를 권장합니다.