✅ React 기초 강좌

📦 폴더 구조 예시

src/
├── App.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
├── components/
│   └── Navbar.jsx

📄 App.jsx

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

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

export default App;

📄 components/Navbar.jsx

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

function Navbar() {
  return (
    <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>
  );
}

export default Navbar;

📄 pages/Home.jsx

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

export default Home;

📄 pages/About.jsx

function About() {
  return <h2>📖 소개 페이지입니다</h2>;
}

export default About;

📄 pages/Contact.jsx

function Contact() {
  return <h2>📬 문의 페이지입니다</h2>;
}

export default Contact;

✅ 실행 예시

• http://localhost:5173/ → 🏠 홈 페이지입니다
• http://localhost:5173/about → 📖 소개 페이지입니다
• http://localhost:5173/contact → 📬 문의 페이지입니다
• 상단 네비게이션을 통해 SPA 방식으로 전환됨

GitHub - heroyooi/react-app at ch4_1