✅ React 기초 강좌

🎯 학습 목표

• 중첩 라우팅(nested routes)의 개념과 구조를 이해한다.
• Outlet을 활용해 공통 레이아웃을 구성한다.
• 반복되는 헤더/네비게이션을 별도로 분리해 재사용한다.

✅ 중첩 라우팅이란?

상위 라우트에 공통 레이아웃(예: Header, Navbar)을 두고,

하위 라우트를 중첩된 위치에 삽입하는 라우팅 방식입니다.

• Route 안에 또 다른 Route를 중첩해 구성
• 상위 컴포넌트에서 <Outlet /> 위치에 하위 컴포넌트가 렌더링됨

🔧 기본 구조

<Route path="/" element={<Layout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
</Route>

🔁 Outlet이란?

상위 컴포넌트에서 하위 페이지가 표시될 자리를 지정하는 컴포넌트입니다.

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

function Layout() {
  return (
    <div>
      <h1>공통 레이아웃</h1>
      <Outlet /> {/* 하위 라우트 컴포넌트가 여기 삽입됨 */}
    </div>
  );
}

✅ 예제 코드

📄 components/Layout.jsx

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

function Layout() {
  return (
    <div>
      <nav style={{ padding: '10px', borderBottom: '1px solid #ccc' }}>
        <Link to="/" style={{ marginRight: '10px' }}>홈</Link>
        <Link to="/about" style={{ marginRight: '10px' }}>소개</Link>
        <Link to="/contact">문의</Link>
      </nav>

      <main style={{ padding: '20px' }}>
        <Outlet />
      </main>
    </div>
  );
}

export default Layout;

📄 App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

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

export default App;

📄 pages/Home.jsx, About.jsx, Contact.jsx는 동일

function Home() {
  return <h2>🏠 홈 페이지입니다</h2>;
}
export default Home;

✅ 동작 흐름

• 모든 페이지에 nav가 고정 표시되고
• 내부 페이지는 Outlet 자리에 동적으로 렌더링됨

예:

• / → 홈 콘텐츠가 <Outlet />에 표시됨
• /about → 소개 콘텐츠가 교체됨
• /contact → 문의 콘텐츠가 교체됨

✍️ 과제

🧩 1. 다음과 같은 중첩 라우팅 구조를 구현해보세요:

• 공통 레이아웃 컴포넌트 (Layout.jsx)
• 하위 페이지: /dashboard, /dashboard/settings
• 메뉴를 통해 두 페이지 이동
• Outlet으로 하위 콘텐츠 연결