✅ React 기초 강좌

🎯 학습 목표

• React Router의 역할과 SPA에서의 필요성을 이해한다.
• 페이지를 구성하고 라우팅을 설정해 화면 전환을 구현한다.
• 동적 라우팅, 중첩 라우팅의 개념을 익힌다.

✅ React Router란?

React Router는 React 애플리케이션에서 **클라이언트 측 라우팅(SPA 내 페이지 이동)**을 담당하는 라이브러리입니다.

왜 필요한가요?

• React는 SPA이므로 페이지 전환 시 전체 새로고침이 발생하지 않음
• URL에 따라 다른 화면을 보여줘야 할 때 라우팅 시스템이 필요

📦 설치하기

npm install react-router-dom

✅ 혹 Node.js 버전이 vite@7.0.4에서 요구하는 최소 버전 조건을 만족하지 않는 경우

npm WARN EBADENGINE Unsupported engine {
  package: 'vite@7.0.4',
  required: { node: '^20.19.0 || >=22.12.0' },
  current: { node: 'v20.14.0' }
}

• vite@7.0.4는 Node.js 20.19.0 이상 또는 22.12.0 이상이 필요합니다.
• 위 에러가 뜨는 경우 Node.js 버전은 v20.14.0 → 조건 미달 ❌

🔧 해결 방법

1. Node.js 업그레이드

현재 Node 20.14.0 → 20.19.0 이상 또는 22.12.0 이상으로 올려야 합니다.

📌 방법 A. Node.js 공식 다운로드

1. https://nodejs.org/ko 로 이동

2. "LTS" 탭에서 최신 LTS (권장 버전) 다운로드 (현재는 v20.19.0 이상 or v22)

3. 설치 후 터미널에서 다음으로 확인:

   node -v
   

📌 방법 B. nvm 사용 (권장)

여러 버전을 관리하려면 nvm 사용이 편리합니다.

Windows용 설치:

1. nvm-windows 다운로드: https://github.com/coreybutler/nvm-windows/releases

2. 설치 후 새 터미널 열고:

   nvm install 20.19.0
   nvm use 20.19.0
   

Mac/Linux용 설치:

nvm install 20.19.0
nvm use 20.19.0

⛳ 참고

이건 단순한 **경고(warn)**이며, 설치 자체는 계속 진행될 수 있습니다.

하지만 향후 vite 관련 기능에서 오류가 발생할 수 있으므로 Node 버전은 반드시 맞춰주는 것이 좋습니다.

🛠️ 기본 구조

import {
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom';

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

📄 예제 페이지 컴포넌트

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

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

🔗 페이지 간 이동: <Link>

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

<Link to="/">홈</Link>
<Link to="/about">소개</Link>

a 태그를 직접 쓰면 페이지 전체가 새로고침되므로 ❌

반드시 <Link> 컴포넌트를 사용할 것 ✅

✅ 과제

🧩 1. React Router를 적용하여 다음 페이지 구조를 구현해보세요:

• 페이지 컴포넌트: Home.jsx, About.jsx, Contact.jsx
• 네비게이션 메뉴: <Link>를 이용해 3페이지로 이동 가능하게 구성