[React] 리액트 - React에서 네비게이션 바 만들기(react-router 라이브러리)

react에서는 네비게이션 바를 어떻게 만들까?
react-router 라이브러리로 모듈화 시키고 간편하게 라우팅 설정을 할 수 있다.

react-router 주요 기능

1. 동적 라우팅( Dynamic Routing) : 사용자가 특정  URL에 접근할 때 해당 URL에 필요한 컴포넌트를 렌더링
2. 라우트 가드(Route Guards) : 사용자 인증 상태 등에 따라 특정 라우트를 제한할 수 있음.
3. 레이아웃 관리 : 'Outlet'과 같은 기능을 통해 페이지 레이아웃을 쉽게 관리
4. 데이터 로딩 전략 : 로딩과 페칭을 효율적으로 처리하기 위한 'Loader' 기능이 제공
5. 코드 스플리팅(Code Splitting) :  'React.lazy'와 'Suspense'를 이용하여 필요한 라우트만 로드하고, 다른 페이지로 이동할 때 필요한 번들을 로드해서 효율적인 페이지 로딩을 도모

 

react-router 예시

1. 네비게이션 바(Navigation Bar): Link 컴포넌트를 사용하여 특정 경로로의 링크를 제공한다. 이 링크들은 사용자가 클릭하면 해당 경로의 컴포넌트를 렌더링하도록 설정된다.
2. Routes와 Route: 각 Route는 특정 경로에 대응하는 컴포넌트를 정의한다. Routes 컴포넌트는 이러한 Route 컴포넌트를 감싸며, URL에 따라 적절한 컴포넌트를 렌더링하도록 도와준다.
3. 보호된 라우트(Protected Route): ProtectedRoute 컴포넌트는 특정 조건(예: 사용자 인증)이 충족될 때만 컴포넌트에 접근을 허용한다. 조건이 충족되지 않을 경우 다른 페이지로 리디렉션할 수 있다.

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import DashboardPage from './DashboardPage';
import ProtectedRoute from './ProtectedRoute';

function App() {
  return (
    <Router>
      <div>
        {/* 네비게이션 바 */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        
        {/* 라우트 설정 */}
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

 

1.