[리액트] Route 이론

🧭 1. React Router란?

React Router는 URL 경로에 따라 다른 컴포넌트를 보여주는 라이브러리입니다.
전통적인 a 태그와는 다르게, 페이지 전체를 새로고침하지 않고도 뷰를 전환할 수 있게 도와줘요.

✅ 즉, 부드럽고 빠른 화면 전환(SPA) 을 가능하게 해줍니다.

---

🧱 2. 기본 구성 요소

<BrowserRouter>

• 최상단에서 라우팅 기능을 사용할 수 있게 감싸주는 컴포넌트
• 보통 index.tsx에서 사용

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

<BrowserRouter>
  <App />
</BrowserRouter>

Routes와 Route
실제 어떤 경로에서 어떤 컴포넌트를 보여줄지를 정의

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

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

📝 참고:

element 속성에는 보여줄 컴포넌트 JSX가 들어갑니다.

path는 URL 경로입니다.

🔗 3. Link와 NavLink
전통적인 a href="..."는 페이지 전체를 새로고침합니다.
React에서는 Link 또는 NavLink를 사용해서 페이지를 새로고침 없이 이동할 수 있어요.

✅ Link 예시

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

<Link to="/about">About</Link>

✅ NavLink 예시 (현재 페이지 강조 가능)

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

<NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>
  About
</NavLink>

🎨 NavLink는 현재 경로와 일치하면 자동으로 active 클래스를 부여해 스타일을 바꿀 수 있어요.

♻️ 4. 새로고침 없이 화면이 전환되는 이유

React는 Virtual DOM(가상돔) 을 사용합니다.

초기 렌더링 시, 실제 DOM과 가상 DOM을 모두 생성

상태 변화나 라우팅이 발생하면, 변경된 가상 DOM을 다시 계산

변경된 부분만 진짜 DOM에 적용 (Diff 알고리즘)

이로 인해 화면이 깜빡이지 않고 부드럽게 전환됨