React Router 원리와 활용법 - React, 알고 쓰자 6일차

React Router Principles and Usage - React Explained Day 6

npm install react-router-dom
 # 또는
yarn add react-router-dom

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; // Link 추가
 
// 페이지 컴포넌트 예시
function HomePage() {
  return <h2>홈 페이지</h2>;
}
 
function AboutPage() {
  return <h2>소개 페이지</h2>;
}
 
// 네비게이션 컴포넌트 예시
function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/about">소개</Link></li>
      </ul>
    </nav>
  );
}
 
 
function App() {
  return (
    <BrowserRouter>
      <h1>나의 앱</h1>
      <Navigation /> {/* 네비게이션 링크 */}
      <Routes>
        {/* path="/"는 홈페이지 경로 */}
        <Route path="/" element={<HomePage />} />
        {/* path="/about"은 소개 페이지 경로 */}
        <Route path="/about" element={<AboutPage />} />
        {/* 정의되지 않은 다른 모든 경로 처리 (예: 404 페이지) */}
        <Route path="*" element={<h2>페이지를 찾을 수 없습니다 (404)</h2>} />
      </Routes>
    </BrowserRouter>
  );
}
 
export default App;

// Navigation 컴포넌트 예시 (기존과 동일)
import { Link } from 'react-router-dom';
 
function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          {/* to prop에 이동할 경로 지정 */}
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
    </nav>
  );
}

import { useNavigate } from 'react-router-dom';
 
function LoginPage() {
  const navigate = useNavigate();
 
  const handleLogin = () => {
    const isLoggedIn = true;
    if (isLoggedIn) {
      // 내부적으로 history.pushState('/') 와 유사하게 동작
      navigate('/');
      // 로그인 페이지 기록을 남기지 않으려면 replace 사용
      // navigate('/', { replace: true }); // history.replaceState('/') 와 유사
    } else {
      alert('로그인 실패!');
    }
  };
 
  return (
    <div>
      <h2>로그인</h2>
      <button onClick={handleLogin}>로그인 하기</button>
    </div>
  );
}

import { useParams } from 'react-router-dom';
 
// Route 설정
// <Route path="/users/:userId" element={<UserProfilePage />} />
 
function UserProfilePage() {
  // URL이 '/users/alice' 라면, params는 { userId: 'alice' } 가 됨
  const params = useParams<{ userId: string }>();
 
  return (
    <div>
      <h2>사용자 프로필</h2>
      <p>사용자 ID: {params.userId}</p>
    </div>
  );
}

// 중첩 라우트 설정 예시 (기존과 동일)
import React from 'react'; // React 임포트
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'; // 필요한 모듈 임포트
 
// 공통 레이아웃 컴포넌트
function MainLayout() { /* ... Outlet 포함 ... */ }
// 페이지 컴포넌트들
function DashboardHome() { return <h3>대시보드 홈</h3>; }
function DashboardAnalytics() { return <h3>대시보드 분석</h3>; }
function SettingsPage() { return <h2>설정</h2>; }
 
function AppNested() { // 컴포넌트 이름 변경 (App 중복 방지)
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<h2>홈페이지 컨텐츠</h2>} />
          <Route path="dashboard" element={<Outlet />}>
            <Route index element={<DashboardHome />} />
            <Route path="analytics" element={<DashboardAnalytics />} />
          </Route>
          <Route path="settings" element={<SettingsPage />} />
        </Route>
        <Route path="*" element={<h2>페이지를 찾을 수 없습니다 (404)</h2>} />
      </Routes>
    </BrowserRouter>
  );
}

import React, { lazy, Suspense } from 'react'; // lazy, Suspense 임포트
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; // 필요한 모듈 임포트
 
// 동적 임포트
const LazyHomePage = lazy(() => import('./pages/HomePage'));
const LazyAboutPage = lazy(() => import('./pages/AboutPage'));
 
function AppLazy() { // 컴포넌트 이름 변경 (App 중복 방지)
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <Suspense fallback={<div>페이지 로딩 중...</div>}>
        <Routes>
          <Route path="/" element={<LazyHomePage />} />
          <Route path="/about" element={<LazyAboutPage />} />
          <Route path="*" element={<h2>페이지를 찾을 수 없습니다 (404)</h2>} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}
 
// ./pages/HomePage.tsx 예시 (default export 필요)
// import React from 'react';
// function HomePage() { return <h2>홈 페이지</h2>; }
// export default HomePage;

// useEffect를 사용한 데이터 페칭 예시 (기존과 동일)
import React, { useState, useEffect } from 'react'; // useState, useEffect 임포트
import { useParams } from 'react-router-dom'; // useParams 임포트
 
// 가짜 API 함수
async function fetchUserData(userId: string): Promise<{ id: string; name: string }> { /* ... */ return { id: userId, name: `사용자 ${userId.toUpperCase()}` }; }
 
function UserProfilePageFetch() { // 컴포넌트 이름 변경
  const { userId } = useParams<{ userId: string }>();
  const [userData, setUserData] = useState</*...*/ | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
 
  useEffect(() => {
    if (userId) {
      // ... 데이터 요청 로직 ...
    }
  }, [userId]); // userId 변경 시 재실행
 
  // ... 렌더링 로직 ...
  if (!userData) return null; // 초기 렌더링 또는 오류 시 null 반환
  return (
    <div>
      <h2>사용자 프로필</h2>
      <p>ID: {userData.id}</p>
      <p>이름: {userData.name}</p>
    </div>
  );
}