19.React Router 완전 정복: React 애플리케이션의 라우팅 구현

"React Router 완전 정복: React 애플리케이션의 라우팅 구현"

---

1시간 분량 강의안 (React Router 기초)

강의 목표

1. React Router의 개념과 필요성을 이해한다.
2. React Router의 주요 기능(라우팅, 동적 라우팅, 네스티드 라우팅)을 학습한다.
3. React 애플리케이션에 React Router를 활용하여 라우팅을 구현한다.

---

강의 목차

---

1. React Router란 무엇인가? (10분)

React Router의 정의

• React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 가장 널리 사용되는 라이브러리입니다.
• URL 경로에 따라 다른 React 컴포넌트를 렌더링하도록 설계되었습니다.

React Router의 주요 특징

1. SPA 지원: Single Page Application에서 페이지 간 이동을 URL 변경으로 관리.
2. 동적 라우팅: URL 파라미터를 활용하여 유연한 라우팅 가능.
3. 네스티드 라우팅: 중첩된 경로를 쉽게 관리.
4. 사용자 경험 향상: 페이지 리로드 없이 콘텐츠 전환.

---

2. React Router 설치 및 기본 설정 (10분)

1단계: 설치

npm install react-router-dom

2단계: 기본 설정

• React Router를 사용하려면 BrowserRouter로 애플리케이션을 감싸야 합니다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

3. React Router의 주요 기능 구현 (20분)

1단계: 기본 라우팅

• Routes와 Route를 사용해 경로 설정:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

2단계: 네비게이션 구현

• Link 컴포넌트를 사용하여 페이지 간 이동:

//Navbar.js

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

3단계: 동적 라우팅

• URL 파라미터를 사용해 동적으로 데이터 렌더링:

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <p>User ID: {id}</p>;
}

// App.js
<Routes>
  <Route path="/user/:id" element={<User />} />
</Routes>;

---

4. React Router의 고급 기능 (15분)

1단계: 네스티드 라우팅

• 중첩된 경로를 설정하여 하위 컴포넌트를 관리:

function Dashboard() {
  return (
    <Routes>
      <Route path="profile" element={<Profile />} />
      <Route path="settings" element={<Settings />} />
    </Routes>
  );
}

// App.js
<Routes>
  <Route path="/dashboard/*" element={<Dashboard />} />
</Routes>;

2단계: 리디렉션

• 특정 경로에서 다른 경로로 리디렉션 설정:

import { Navigate } from 'react-router-dom';

<Routes>
  <Route path="/old-path" element={<Navigate to="/new-path" />} />
</Routes>;

3단계: Protected Route

• 인증 상태에 따라 접근을 제어:

function ProtectedRoute({ children, isAuth }) {
  return isAuth ? children : <Navigate to="/login" />;
}

// App.js
<Routes>
  <Route
    path="/dashboard"
    element={<ProtectedRoute isAuth={true}><Dashboard /></ProtectedRoute>}
  />
</Routes>;

---

5. 실습 과제 (10분)

실습 과제

1. 네비게이션 바를 추가하여 Home, About, 그리고 동적 User 페이지로 이동할 수 있도록 설정하세요.
2. 네스티드 라우팅을 사용해 Dashboard 페이지에 Profile과 Settings 하위 경로를 추가하세요.
3. 인증 여부에 따라 대시보드 접근을 제어하는 Protected Route를 구현하세요.

실습 과제(구현)

1. 프로젝트 생성 및 기본 설정

1. React 프로젝트 생성

   npx create-react-app react-router-demo
   cd react-router-demo

2. React Router 설치

   npm install react-router-dom

---

2. 폴더 및 파일 구조 설정

아래와 같은 구조로 폴더와 파일을 준비합니다:

src/
│
├── components/
│   ├── Navbar.js
│
├── pages/
│   ├── Home.js
│   ├── About.js
│   ├── User.js
│   ├── Dashboard.js
│   ├── Profile.js
│   ├── Settings.js
│
├── utils/
│   ├── ProtectedRoute.js
│
└── App.js
└── index.js

 

---

3. 단계별 코드 작성

3.1. 기본 네비게이션 바 추가

src/components/Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/user/123">User</Link></li>
        <li><Link to="/dashboard">Dashboard</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

 

---

3.2. 페이지 컴포넌트 추가

src/pages/Home.js

import React from 'react';

function Home() {
  return <h1>Welcome to the Home Page</h1>;
}

export default Home;

 

 

src/pages/About.js

import React from 'react';

function About() {
  return <h1>About Us</h1>;
}

export default About;

 

 

src/pages/User.js

import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h1>User Page - ID: {id}</h1>;
}

export default User;

---

3.3. 네스티드 라우팅 구현

src/pages/Dashboard.js

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <ul>
        <li><Link to="profile">Profile</Link></li>
        <li><Link to="settings">Settings</Link></li>
      </ul>
      <Outlet /> {/* 하위 라우트가 여기에 표시됩니다 */}
    </div>
  );
}

export default Dashboard;

 

 

src/pages/Profile.js

import React from 'react';

function Profile() {
  return <h2>Profile Page</h2>;
}

export default Profile;

 

src/pages/Settings.js

import React from 'react';

function Settings() {
  return <h2>Settings Page</h2>;
}

export default Settings;

 

---

3.4. Protected Route 구현

src/utils/ProtectedRoute.js

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

// 인증 여부를 확인하는 컴포넌트
function ProtectedRoute({ isAuthenticated }) {
  return isAuthenticated ? <Outlet /> : <Navigate to="/" replace />;
}

export default ProtectedRoute;

 

---

3.5. 메인 라우팅 설정

src/App.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import User from './pages/User';
import Dashboard from './pages/Dashboard';
import Profile from './pages/Profile';
import Settings from './pages/Settings';
import ProtectedRoute from './utils/ProtectedRoute';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <Router>
      <Navbar />
      <button onClick={() => setIsAuthenticated(!isAuthenticated)}>
        {isAuthenticated ? 'Logout' : 'Login'}
      </button>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<User />} />

        {/* Protected Route for Dashboard */}
        <Route element={<ProtectedRoute isAuthenticated={isAuthenticated} />}>
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

 

---

3.6. 엔트리 포인트 설정

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

---

4. 실행 및 테스트

1. 프로젝트 실행:

   npm start

2. 브라우저에서 http://localhost:3000 에 접속합니다.

 

---

5. 동작 확인

1. 네비게이션 바를 클릭하여 Home, About, User 페이지로 이동합니다.
2. Dashboard 페이지는 처음에는 접근 불가합니다.
   • "Login" 버튼을 눌러 인증 상태를 true로 변경하면 접근할 수 있습니다.
3. Dashboard 내에서 Profile 및 Settings 링크를 클릭하여 네스티드 라우팅을 확인합니다.

---

6. Q&A 및 정리 (5분)

• Q&A:
  1. React Router와 Next.js 라우팅의 차이점은 무엇인가요?
  2. React Router는 어떤 애플리케이션에 적합한가요?
• 요약:
  • React Router는 클라이언트 측 라우팅을 간단하고 유연하게 구현할 수 있는 도구입니다.
  • 동적 라우팅, 네스티드 라우팅, Protected Route와 같은 기능을 제공하여 복잡한 라우팅 요구 사항을 충족할 수 있습니다.