React 프로젝트에 라우팅 적용하기: React Router v7 기본 사용법

React에서 페이지 이동과 라우팅을 구현하려면 React Router를 사용하는 것이 일반적입니다. 이 글에서는 React Router v7을 기반으로 간단한 라우팅 구조를 만드는 방법을 소개합니다.

1. Vite로 React 프로젝트 생성

npm create vite@latest my-router-app -- --template react
cd my-router-app
npm install

2. React Router 설치

npm install react-router-dom@latest

3. 페이지 컴포넌트 만들기

아래와 같이 두 개의 페이지 컴포넌트를 만듭니다.

// src/pages/Home.jsx
export default function Home() {
  return <h1>홈 페이지입니다</h1>
}

// src/pages/About.jsx
export default function About() {
  return <h1>소개 페이지입니다</h1>
}

4. 라우터 설정

createBrowserRouter를 이용해 라우팅 구조를 구성합니다.

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

5. 결과 확인

• / 접속 시: 홈 페이지 출력
• /about 접속 시: 소개 페이지 출력

이렇게 간단한 설정만으로도 React 프로젝트에 라우팅 기능을 쉽게 추가할 수 있습니다.