8강. React Router v7

1. React Router v7

1.1. React Router란?

React Router는 페이지 이동을 처리하는 라이브러리다. SPA에서 URL에 따라 다른 화면을 보여준다.

1.2. 설치

npm install react-router@7

1.3. 기본 설정

1.3.1. main.jsx

import { BrowserRouter } from 'react-router';

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

1.3.2. App.jsx

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

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

1.4. 주요 기능

1.4.1. Link로 페이지 이동

<a> 태그 대신 <Link>를 사용한다. 페이지를 새로고침하지 않는다.

import { Link } from 'react-router';

<Link to="/about">소개 페이지로 이동</Link>

1.4.2. URL 파라미터 (useParams)

URL에서 동적으로 값을 받아온다.

// Route 설정: <Route path="/user/:id" element={<User />} />

import { useParams } from 'react-router';

function User() {
  const { id } = useParams();
  return <h1>사용자 ID: {id}</h1>;
}

1.4.3. 프로그래밍 방식 이동 (useNavigate)

특정 동작(예: 로그인 성공) 후 페이지를 이동한다.

import { useNavigate } from 'react-router';

const navigate = useNavigate();
navigate('/home');

1.5. 정리

React Router는 SPA에서 페이지 전환을 담당한다
BrowserRouter로 앱을 감싸야 한다
Routes와 Route로 경로와 컴포넌트를 연결한다
Link는 새로고침 없는 이동을 지원한다
useParams는 URL의 변수 값을 읽을 때 사용한다
useNavigate는 자바스크립트 로직 안에서 이동할 때 사용한다