React

React Router DOM v6 완전 기초 정리! 페이지 이동부터 중첩 라우팅까지 한눈에 보기

jonbeo 2025. 7. 7. 10:40
반응형

 

 

React로 SPA(Single Page Application)를 만들다 보면, 페이지 이동이 필요해집니다.
이때 사용하는 도구가 바로 React Router DOM입니다.

이번 포스팅에서는 2025년 기준으로 가장 많이 쓰는 버전인 v6 기준으로
React Router DOM을 사용하는 방법을 기초부터 중첩 라우팅까지 간단한 예제와 함께 정리해드릴게요!

 

✅ React Router DOM이란?

 

React는 기본적으로 페이지 이동 기능이 없습니다.
SPA에서 URL에 따라 화면을 바꾸기 위해선 react-router-dom 패키지가 필요합니다.

 

1️⃣ 설치 방법

npm install react-router-dom

 

또는 yarn 사용 시:

yarn add react-router-dom

 

 

2️⃣ 기본 구성: BrowserRouter, Routes, Route

 

React Router v6부터는 Switch가 사라지고 Routes를 사용합니다.

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

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

 

✔️ 각각의 Route는 element 속성으로 컴포넌트를 전달합니다.

 

3️⃣ Link 컴포넌트로 이동하기

 

SPA에서는 <a href=""> 대신 Link를 사용해야 전체 새로고침이 발생하지 않습니다.

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

<Link to="/">홈</Link>
<Link to="/about">소개</Link>

 

 

4️⃣ 중첩 라우팅 (Nested Routes)

 

React Router v6에서는 중첩 라우팅도 매우 간단하게 구현할 수 있습니다.

// App.js
<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>
  • /dashboard/profile, /dashboard/settings 와 같은 주소 구조
  • Dashboard 내부에서 <Outlet /> 컴포넌트를 사용해야 중첩 페이지가 렌더링됩니다.

 

5️⃣ useNavigate 훅으로 프로그래밍 방식 이동

 

버튼 클릭 시 URL을 바꾸고 싶을 때는 useNavigate()를 사용합니다.

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

const MyComponent = () => {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return <button onClick={goToAbout}>소개 페이지로 이동</button>;
};

 

 

✅ 정리하며

 

React Router DOM은 React 앱에서 페이지를 나누는 핵심 도구입니다.
이번 포스팅에서는 v6 기준으로 가장 기본적인 기능들을 알아봤습니다.

반응형