12 React Router로 페이지 이동하기: React Router v6 기본 사용법 및 동적 라우트

 

1. React Router란?

React는 기본적으로 단일 페이지 애플리케이션(SPA) 구조로 동작합니다. 사용자가 다른 페이지로 이동할 때 전체 페이지를 다시 로드하지 않고도 클라이언트 사이드에서 라우팅을 처리할 수 있도록 React Router가 사용됩니다. 특히 React Router v6는 더욱 간결한 문법과 강력한 기능을 제공합니다.

2. React Router v6 기본 사용법

React Router v6을 사용하려면 react-router-dom 패키지를 설치해야 합니다.

가. React Router 설치

npm install react-router-dom

나. 기본적인 라우팅 설정

React Router를 사용하려면 BrowserRouter, Routes, Route 컴포넌트를 활용하여 라우트를 설정해야 합니다.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

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

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

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

export default App;

위 코드에서 Routes 내부에 여러 개의 Route를 설정하여 경로에 따라 다른 컴포넌트를 렌더링할 수 있습니다.

3. 동적 라우트와 URL 파라미터 처리

경로에 변수를 포함할 경우 **동적 라우트(Dynamic Route)**를 사용합니다. 동적 라우트는 useParams 훅을 활용하여 URL에서 값을 가져올 수 있습니다.

가. 동적 라우트 설정

import React from "react";
import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";

function UserProfile() {
  let { username } = useParams();
  return <h2>{username}님의 프로필 페이지</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:username" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

위 코드에서 :username은 동적인 값으로, /user/홍길동처럼 접근하면 홍길동님의 프로필 페이지가 렌더링됩니다.

4. 네비게이션 및 링크 사용

페이지 이동을 위해 Link와 useNavigate를 활용할 수 있습니다.

가. Link 컴포넌트 사용

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

function Navigation() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
    </nav>
  );
}

나. useNavigate로 프로그래밍 방식 이동

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

function Home() {
  const navigate = useNavigate();
  
  return (
    <div>
      <h2>홈 페이지</h2>
      <button onClick={() => navigate("/about")}>소개 페이지로 이동</button>
    </div>
  );
}

5. 정리

React Router v6을 활용하면 클라이언트 사이드 라우팅을 쉽게 구현할 수 있습니다. 기본적인 페이지 이동뿐만 아니라 동적 라우트와 URL 파라미터를 활용하여 다양한 구조의 웹 애플리케이션을 만들 수 있습니다. 또한 Link와 useNavigate를 이용해 네비게이션을 효율적으로 관리할 수 있습니다.

React 프로젝트에서 React Router v6를 적극적으로 활용하여 사용자 경험을 향상시켜 보세요!