✅ React 기초 강좌

📁 폴더 구조 예시

src/
├── App.jsx
├── components/
│   └── DashboardLayout.jsx
├── pages/
│   ├── DashboardHome.jsx
│   └── DashboardSettings.jsx

📄 components/DashboardLayout.jsx

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

function DashboardLayout() {
  return (
    <div>
      <header style={{ padding: '10px', backgroundColor: '#f5f5f5' }}>
        <h1>📊 대시보드</h1>
        <nav>
          <Link to="/dashboard" style={{ marginRight: '10px' }}>홈</Link>
          <Link to="/dashboard/settings">설정</Link>
        </nav>
      </header>
      <main style={{ padding: '20px' }}>
        <Outlet />
      </main>
    </div>
  );
}

export default DashboardLayout;

📄 pages/DashboardHome.jsx

function DashboardHome() {
  return <h2>🏠 대시보드 홈입니다</h2>;
}

export default DashboardHome;

📄 pages/DashboardSettings.jsx

function DashboardSettings() {
  return <h2>⚙️ 대시보드 설정 페이지입니다</h2>;
}

export default DashboardSettings;

📄 App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DashboardLayout from './components/DashboardLayout';
import DashboardHome from './pages/DashboardHome';
import DashboardSettings from './pages/DashboardSettings';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardHome />} />
          <Route path="settings" element={<DashboardSettings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✅ 실행 결과

• /dashboard → "🏠 대시보드 홈입니다"
• /dashboard/settings → "⚙️ 대시보드 설정 페이지입니다"
• 상단 메뉴는 항상 고정 (DashboardLayout에 있음)

이제 하나의 공통 레이아웃을 기반으로 하위 콘텐츠만 바뀌는 SPA 구조를 구현할 수 있습니다.