[ vite+React 기초학습 10] React Router 기초와 SPA 라우팅

React Router란 무엇인가

React Router는 SPA(Single Page Application)에서 페이지 이동을 쉽게 구현할 수 있게 도와주는 라이브러리입니다. 페이지를 새로고침하지 않고 URL만 바뀌면서 다른 화면을 보여줍니다.

기본 개념

• BrowserRouter로 라우터 감싸기
• Route 컴포넌트로 경로 설정
• Link 컴포넌트로 페이지 이동

주요 사용 위치/상황

• SPA에서 다중 페이지 UI 구현
• 메뉴 클릭 시 화면 전환할 때

구체적 코드 예시

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

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

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

핵심 요점 정리

• React Router로 SPA 페이지 전환 구현
• URL 경로에 맞춰 컴포넌트 렌더링
• Link로 화면 이동, BrowserRouter로 감싸기 필수

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.