리액트 Route 컴포넌트는 HTML 태그로 변환되는가..?

React Router에서 <Route> 컴포넌트는 HTML 태그로 직접 변환되지 않습니다. 대신, 특정 경로에 해당하는 컴포넌트를 렌더링하는 역할을 합니다.

하지만, 페이지 이동을 위한 링크 역할을 하는 것은 <Route>가 아니라 <Link> 또는 <NavLink>입니다.
이들은 실제 HTML의 <a> 태그로 렌더링됩니다.

---

1. <Route>는 HTML 태그로 변환되지 않음

<Route> 자체는 JSX에서 경로를 기반으로 특정 컴포넌트를 렌더링하는 역할을 할 뿐, HTML 태그로 변환되지 않습니다.

✅ 예제: <Route>

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

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

export default App;

이 경우, 브라우저에서 실제 HTML을 보면 <Route>는 보이지 않으며,
path와 매칭되는 <Home /> 또는 <About /> 컴포넌트만 렌더링됩니다.

---

2. <Link>는 <a> 태그로 변환됨

React에서 페이지 이동을 할 때는 <a> 태그 대신 <Link>를 사용해야 합니다.
그 이유는 <a> 태그를 사용하면 전체 페이지가 새로고침되지만, <Link>는 클라이언트 사이드 라우팅을 활용하여 화면만 변경하기 때문입니다.

✅ 예제: <Link> 사용

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

🔍 렌더링된 HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

👉 to 속성이 href 속성으로 변환되면서, <Link>가 실제 <a> 태그로 렌더링됩니다.

---

3. <NavLink>는 활성화된 상태를 추가

<NavLink>는 <Link>와 동일하지만, 현재 경로와 일치할 경우 CSS 클래스를 자동으로 추가하는 기능이 있습니다.

✅ 예제: <NavLink> 사용

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
        <li><NavLink to="/about" activeClassName="active">About</NavLink></li>
      </ul>
    </nav>
  );
}

🔍 렌더링된 HTML (현재 경로가 /about일 경우)

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about" class="active">About</a></li>
  </ul>
</nav>

👉 현재 경로(/about)와 일치하는 <a> 태그에 "active" 클래스가 추가됩니다.

---

4. <a> 태그와 <Link>의 차이

요소	설명	페이지 새로고침 여부
<a>	일반 HTML 링크	✅ 새로고침 발생
<Link>	React Router 링크	❌ 새로고침 없음 (클라이언트 사이드 라우팅)
<NavLink>	현재 경로일 때 스타일 추가	❌ 새로고침 없음

---

결론

• <Route>는 HTML 태그로 변환되지 않으며, 경로에 따라 특정 컴포넌트를 렌더링하는 역할을 합니다.
• <Link>와 <NavLink>는 실제 HTML에서 <a> 태그로 변환됩니다.
• <a> 태그를 직접 사용하면 페이지가 새로고침되므로, React에서는 <Link>를 사용하는 것이 권장됩니다.

🚀 즉, React Router에서 Route는 HTML 태그로 나오지 않지만, Link는 <a> 태그로 변환됩니다.