React Router를 사용하면 SPA(Single Page Application) 개발에서 라우팅을 손쉽게 관리할 수 있습니다. 이번 포스팅에서는 React Router의 부가 기능들을 활용하여 페이지 이동, 스타일링, 그리고 리다이렉션을 구현하는 방법을 알아보겠습니다.
1. useNavigate 훅으로 페이지 이동
useNavigate는 Link 컴포넌트를 사용하지 않고 프로그래밍 방식으로 페이지를 이동할 때 사용하는 훅입니다.
예제: 이전 페이지와 정보 페이지로 이동 버튼 추가
아래 코드는 useNavigate 훅을 활용하여 버튼 클릭 시 페이지를 이동시키는 방법을 보여줍니다.
import { Link, Outlet, useNavigate } from "react-router-dom";
// Link: 경로 이동을 위한 컴포넌트
// Outlet: 하위 라우트를 렌더링할 위치를 지정
// useNavigate: 프로그래밍 방식으로 경로를 변경하는 훅
export default function Layout() {
const navigate = useNavigate();
// useNavigate를 통해 경로를 프로그래밍 방식으로 변경할 수 있습니다.
// 이전 페이지로 이동하는 함수
const goBack = () => navigate(-1);
// navigate(-1): 브라우저의 히스토리 스택에서 이전 페이지로 이동
// "/info" 페이지로 이동하는 함수
const goInfo = () => navigate("/info");
// navigate("/info"): "/info" 경로로 직접 이동
return (
<>
{/* 헤더 영역: 네비게이션 메뉴 및 추가 버튼 */}
<header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}>
{/* Link 컴포넌트를 통해 클릭 시 해당 경로로 이동 */}
<Link to="/">홈</Link> |
<Link to="/about">소개</Link> |
<Link to="/info">정보</Link> |
<Link to="/profiles">프로파일</Link>
{/* 버튼을 통해 프로그래밍 방식으로 경로 이동 */}
<div>
<button onClick={goBack}>이전 페이지로 이동</button>
{/* 이전 페이지로 이동하는 버튼 */}
<button onClick={goInfo}>정보 페이지로 이동</button>
{/* "/info" 페이지로 이동하는 버튼 */}
</div>
</header>
{/* 메인 콘텐츠 영역 */}
<main>
<Outlet />
{/* 서브 라우트에 해당하는 컴포넌트를 렌더링하는 위치 */}
</main>
{/* 푸터 영역 */}
<footer style={{ background: 'lightgray', padding: 16, fontSize: 16 }}>
Copyright ....
{/* 웹사이트의 저작권 정보를 표시 */}
</footer>
</>
);
}2. NavLink로 현재 페이지 스타일 적용
NavLink는 경로와 현재 URL이 일치할 경우 특정 스타일 또는 클래스를 적용할 수 있는 컴포넌트입니다.
예제: 현재 페이지에 빨간색 스타일 적용
아래 코드는 NavLink의 style 속성을 사용하여 현재 경로와 일치하는 경우 텍스트 색상을 빨간색으로 설정합니다.
import { Link, NavLink, Outlet, useNavigate } from "react-router-dom";
// React Router의 주요 컴포넌트를 가져옴
// - Link: 경로 이동을 위한 간단한 링크
// - NavLink: 현재 경로를 기반으로 스타일을 적용할 수 있는 링크
// - Outlet: 서브 라우트를 렌더링할 위치를 지정
// - useNavigate: 프로그래밍 방식으로 경로를 변경하는 훅
export default function Layout() {
const navigate = useNavigate();
// useNavigate를 통해 동적으로 경로를 변경할 수 있음
const goBack = () => navigate(-1);
// 이전 페이지로 이동
// navigate(-1): 브라우저의 히스토리 스택에서 이전 페이지로 이동
const goInfo = () => navigate("/info");
// "/info" 페이지로 이동
// navigate("/info"): 지정된 경로로 바로 이동
return (
<>
{/* 헤더 영역: 네비게이션 메뉴와 버튼 */}
<header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}>
{/* Link: 단순 경로 이동 */}
<Link to="/">홈</Link> |
{/* NavLink: 현재 경로와 일치할 경우 스타일을 적용 */}
<NavLink
to="/about"
style={({ isActive }) => isActive ? { color: 'red' } : undefined}
>
소개
</NavLink> |
{/* 나머지 Link 요소들 */}
<Link to="/info">정보</Link> |
<Link to="/profiles">프로파일</Link>
{/* 동적 경로 변경 버튼 */}
<div>
<button onClick={goBack}>이전 페이지로 이동</button>
{/* 이전 페이지로 이동하는 버튼 */}
<button onClick={goInfo}>정보 페이지로 이동</button>
{/* "/info" 페이지로 이동하는 버튼 */}
</div>
</header>
{/* 메인 콘텐츠 영역 */}
<main>
<Outlet />
{/* 서브 라우트를 렌더링할 위치 */}
</main>
{/* 푸터 영역 */}
<footer style={{ background: 'lightgray', padding: 16, fontSize: 16 }}>
Copyright ....
{/* 모든 페이지에 고정적으로 표시될 푸터 */}
</footer>
</>
);
}
3. Navigate 컴포넌트로 리다이렉션 구현
Navigate는 특정 조건이 충족되었을 때 컴포넌트가 렌더링되자마자 다른 페이지로 이동시킬 수 있는 컴포넌트입니다.
예제: 로그인 상태에 따른 리다이렉션
로그인 상태가 아닌 경우 마이페이지에 접근하면 로그인 페이지로 리다이렉션됩니다.
Login.js
export default function Login() {
// Login 컴포넌트를 기본 내보내기로 정의
// 이 컴포넌트는 로그인 페이지 UI를 표시하는 역할을 수행
return (
<>
{/* React 컴포넌트는 JSX 문법을 사용하여 UI를 구성 */}
<h1>로그인 페이지</h1>
{/* 로그인 페이지의 제목을 표시 */}
</>
);
}MyPage.js
import { Navigate } from "react-router-dom";
// MyPage 컴포넌트 정의
export default function MyPage() {
// 로그인 상태를 확인하는 변수. 실제 구현에서는 인증 로직 또는 상태 관리 시스템을 사용할 수 있음.
const isLogin = false; // 현재 로그인 상태를 false로 설정 (로그인되지 않음)
// 로그인하지 않은 경우
if (!isLogin) {
// Navigate 컴포넌트를 사용해 "/login" 경로로 리다이렉션
// replace={true}는 히스토리 스택에서 현재 페이지를 대체하여 뒤로 가기 시 이전 페이지로 이동할 수 없게 설정
return <Navigate to="/login" replace={true} />;
}
// 로그인된 경우
return (
// 마이 페이지 내용 출력
<h1>마이 페이지</h1>
);
}
4. App.js에 라우트 추가하기
위에서 구현한 컴포넌트들을 App.js에 등록하여 라우터를 구성합니다.
import { Route, Routes } from "react-router-dom"; // React Router를 사용하여 경로(Route)와 라우트 그룹(Routes)을 구성
import About from "./About"; // About 컴포넌트 임포트
import Home from "./Home"; // Home 컴포넌트 임포트
import Profile from "./Profile"; // Profile 컴포넌트 임포트
import Profiles from "./Profiles"; // Profiles 컴포넌트 임포트
import Layout from "./Layout"; // Layout 컴포넌트 임포트 (공통 레이아웃을 제공)
import Login from "./Login"; // Login 컴포넌트 임포트 (로그인 페이지)
import MyPage from "./MyPage"; // MyPage 컴포넌트 임포트 (마이 페이지)
// App 컴포넌트 정의
const App = () => {
return (
<Routes>
{/* Layout 컴포넌트를 사용하는 라우트 그룹 */}
<Route element={<Layout />}>
{/* "/" 경로에 Home 컴포넌트를 연결 */}
<Route path="/" element={<Home />} />
{/* "/about" 경로에 About 컴포넌트를 연결 */}
<Route path="/about" element={<About />} />
{/* "/info" 경로에 About 컴포넌트를 재사용 */}
<Route path="/info" element={<About />} />
{/* "/profiles" 경로에 Profiles 컴포넌트를 연결 */}
<Route path="/profiles" element={<Profiles />}>
{/* Profiles의 서브 경로 ":userid"에 Profile 컴포넌트를 연결 */}
<Route path=":userid" element={<Profile />} />
</Route>
{/* "/login" 경로에 Login 컴포넌트를 연결 */}
<Route path="/login" element={<Login />} />
{/* "/mypage" 경로에 MyPage 컴포넌트를 연결 */}
<Route path="/mypage" element={<MyPage />} />
</Route>
</Routes>
);
};
export default App;
5. 마이페이지 접근 테스트
테스트 방법
- 브라우저에서 마이페이지 경로로 직접 접근:
http://localhost:3000/mypage - 결과:
- 로그인 상태가 아니면 로그인 페이지로 리다이렉션됩니다.
*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.
'코딩 > 리액트' 카테고리의 다른 글
| [새싹 성동 2기] 리액트 라우터와 사용예시 (2) | 2024.12.06 |
|---|---|
| [새싹 성동 2기] Context API와 useContext 훅을 사용하여 테마 적용하기 (1) | 2024.12.06 |
| [새싹 성동 2기] useMemo, useCallback, React.memo 활용법 (1) | 2024.12.06 |
| [새싹 성동 2기] useReducer를 활용한 상태 관리 (0) | 2024.12.06 |
| [새싹 성동 2기] 리액트 앱에서 국가와 국기 정보를 출력하는 방법 (1) | 2024.11.19 |