추가 기능 살펴보기
React Router 추가 기능
React Router에는 라우팅과 관련된 작업에 유용하게 활용할 수 있는 다양한 컴포넌트와 Hook, 유틸리티 등이 포함되어 있습니다.
이번 장에서는 이러한 추가 기능들에 대해 살펴보도록 하겠습니다
NavLink 컴포넌트로 스타일 적용하기
NavLink 컴포넌트는 활성(active) 또는 보류(pending)인지 여부를 확인할 수 있는 특수한 종류의 Link 컴포넌트입니다.
이 컴포넌트를 사용하면 링크에서 사용하는 경로가 현재 Route의 경로와 일치하는지 여부를 비교하여, 일치하는 경우 특정 스타일이나 CSS 클래스를 적용하도록 설정할 수 있습니다. 이를 활용하여 현재 페이지의 계층 구조를 나타내는 탐색 보조 도구인 브레드크럼(breadcrumb)이나 탭(tab) 집합과 같은 탐색 메뉴를 손쉽게 만들 수 있습니다.
앞서 살펴 본 예제의 Link 컴포넌트를 모두 NavLink 컴포넌트로 변경해 봅시다. NavLink 컴포넌트를 사용하는 첫 번째 방법으로는 전통적인 CSS 클래스를 활용하여 다음과 같이 스타일을 지정할 수 있습니다.
styles.css
nav a.active {
text-decoration: none;
font-weight: bold;
}
NavLink 컴포넌트는 내부적으로는 <nav>요소로 감싸진 <a>요소로 렌더링되며, 현재 Route 경로와 일치할 경우 active 클래스가 자동 추가되므로, 이를 활용하여 스타일을 지정할 수 있습니다.
두 번째 방법으로는 style prop에 isActive 형태와 같은 불리언 값을 인수로 전달 받는 함수를 전달하여 스타일을 지정할 수 있습니다.
예제(Menu.js)
import { NavLink, Outlet } from "react-router-dom";
const Menu = () => {
const style = ({ isActive }) => {
return {
color: isActive ? "red" : "blue",
fontWeight: isActive ? "bold" : "normal"
};
};
return (
<div>
<nav>
<ul>
<li>
<NavLink style={style} to="/">
Home
</NavLink>
</li>
<li>
<NavLink style={style} to="/about">
About
</NavLink>
</li>
<li>
<NavLink style={style} to="/news">
News
</NavLink>
</li>
</ul> </nav>
<hr />
<Outlet />
</div>
);
};
export default Menu;
Navigate 컴포넌트로 Redirect 설정하기
React 애플리케이션의 특정 컴포넌트에는 인증되지 않은 사용자의 접근을 막아야 할 경우가 있습니다.
예를 들어, MyAccount 컴포넌트는 사용자의 계정 정보를 보여주는 페이지로 사용자의 로그인이 필요하기 때문에 로그인하지 않은 사용자에게는 해당 페이지 대신 로그인 페이지를 대신 보여줘야 합니다.
Navigate 컴포넌트는 렌더링하는 순간 해당 컴포넌트 대신 다른 컴포넌트를 대신 렌더링하도록(redirect) 설정할 때 유용하게 사용할 수 있습니다.
다음 예제는 사용자의 로그인 여부를 체크하여 로그인되지 않은 사용자는 계정 페이지가 아닌 로그인 페이지를 대신 보여주는 예제입니다.
Login.js
const Login = () => {
return (
<div>
<h3>로그인 해주세요.</h3>
<div>
<input type="email" name="" id="" placeholder="Email" />
</div>
<div>
<input type="password" name="" id="" placeholder="Password" />
</div>
</div>
);
};
export default Login;
예제(MyAccount.js)
import { Navigate } from "react-router-dom"; const MyAccount = () => { let isLoggedIn = false; if (!isLoggedIn) { return <Navigate to="/login" replace={true} />; } return <div>나의 계정 페이지에 오신 것을 환영합니다!</div>; }; export default MyAccount;
예제(App.js)
// ... <Route path="myaccount" element={<MyAccount />} /> // ...
MyAccount 컴포넌트에서 isLoggedIn 변수의 값을 true와 false로 번갈아 변경하면서 그 결과를 살펴봅시다.
