React Router: SPA(싱글 페이지 애플리케이션) 라우팅 구현

SPA와 React Router DOM

리액트는 하나의 빈 HTML 페이지를 로드한 뒤 자바스크립트로 화면을 갈아끼우는 SPA(Single Page Application) 방식을 사용합니다. 브라우저가 실제로 새 페이지를 요청하지 않으므로 화면 깜빡임이 없고 매우 빠릅니다.

🚨 <a> 태그의 치명적 단점

HTML의 기본 <a href="..."> 태그를 사용하면 브라우저가 페이지를 완전히 새로고침합니다. 이 경우 메모리에 저장되어 있던 리액트의 모든 State(상태값)가 날아가버리므로 절대 사용해서는 안 됩니다.

💡 <Link> vs useNavigate()

<Link>는 사용자가 명시적으로 클릭하는 메뉴바나 네비게이션에 사용합니다. 반면 useNavigate()는 '로그인 버튼 클릭 후 성공하면 메인으로 이동'과 같이 프로그래밍 방식(특정 로직 내부)에서 주소를 이동할 때 씁니다.

하지만 사용자는 주소(URL)에 따라 다른 화면을 보고 싶어 하고, 뒤로가기 버튼도 작동해야 합니다. 이를 구현하기 위해 브라우저의 History API를 가로채어 가짜 페이지 이동을 구현하는 표준 라이브러리가 바로 react-router-dom입니다.

핵심 컴포넌트

BrowserRouter: 최상위를 감싸 라우팅 환경을 활성화합니다.
Routes / Route: URL 경로(path)에 따라 보여줄 컴포넌트(element)를 매핑합니다.
Link: HTML의 <a> 태그를 대체합니다. 페이지 새로고침 없이 URL만 변경합니다.

Terminal

bash - Terminal

npm install react-router-dom

import { MemoryRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import ProductDetail from './ProductDetail';

export default function App() {
  const linkStyle = { color: '#2563eb', textDecoration: 'underline', fontWeight: 'bold' };

  return (
    // 실습 환경(iframe)에서는 BrowserRouter 대신 MemoryRouter를 사용합니다.
    <Router>
      <nav style={{ padding: '1rem', background: '#f1f5f9', display: 'flex', gap: '1.5rem', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
        {/* a 태그 대신 Link 컴포넌트 사용 */}
        <Link to="/" style={linkStyle}>홈</Link>
        <Link to="/product/123" style={linkStyle}>123번 상품보기</Link>
        <Link to="/product/999" style={linkStyle}>999번 상품보기</Link>
      </nav>

      <div style={{ padding: '2rem' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/product/:id" element={<ProductDetail />} />
          <Route path="*" element={<h2>404 Not Found</h2>} />
        </Routes>
      </div>
    </Router>
  );
}

실행 결과