React Router의 기본 사용법

 

React를 활용한 웹 애플리케이션 개발에서 라우팅은 필수적인 요소입니다. React Router는 단일 페이지 애플리케이션(SPA)에서 효율적인 라우팅을 구현할 수 있는 강력한 라이브러리입니다. 이번 글에서는 React Router의 기본 사용법을 살펴보며, 라우터 설정부터 간단한 예제 구현까지 단계별로 알아보겠습니다.

1. React Router란?

React Router는 React 애플리케이션에서 페이지 이동을 가능하게 해주는 라이브러리입니다. 단일 페이지 애플리케이션에서는 실제로 페이지를 새로고침하지 않고도 URL에 따라 다른 컴포넌트를 렌더링할 수 있습니다. 이를 통해 사용자는 마치 여러 페이지가 존재하는 것처럼 느끼게 됩니다.

주요 특징

• SPA에서의 동적 라우팅 지원
• 선언형 라우팅 구조
• URL 상태 관리
• 브라우저 히스토리와의 통합

2. React Router 설치

React Router를 사용하려면 먼저 프로젝트에 해당 패키지를 설치해야 합니다. 아래 명령어를 사용하여 설치를 진행합니다.

npm install react-router-dom

또는 Yarn을 사용하는 경우:

yarn add react-router-dom

React Router의 최신 버전을 사용하는 것이 권장됩니다. 최신 버전에서는 많은 기능이 향상되고 업데이트되었기 때문입니다.

3. 기본 설정

React Router를 사용하려면 먼저 애플리케이션의 엔트리 파일에서 라우터를 설정해야 합니다. 가장 기본적인 설정은 BrowserRouter를 활용하는 것입니다.

App.js 예제

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

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

export default App;

설명

1. BrowserRouter: React Router의 핵심 컴포넌트로, 애플리케이션의 라우팅을 관리합니다.
2. Routes: 여러 라우트를 감싸는 컨테이너입니다.
3. Route: 각 라우트를 정의하며, path와 element 속성을 가집니다.

4. 기본 컴포넌트 작성

위 예제에서 사용된 Home과 About 컴포넌트를 간단히 작성해 보겠습니다.

Home.js

import React from 'react';

function Home() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <p>React Router의 기본 사용법을 배우고 있습니다.</p>
    </div>
  );
}

export default Home;

About.js

import React from 'react';

function About() {
  return (
    <div>
      <h1>소개 페이지</h1>
      <p>React Router를 활용해 라우팅을 구현해 보세요.</p>
    </div>
  );
}

export default About;

5. 라우터의 고급 사용법

React Router의 기본적인 사용법 외에도 다양한 기능을 활용할 수 있습니다. 몇 가지 주요 기능을 소개합니다.

5.1 URL 파라미터

URL의 동적 세그먼트를 활용해 특정 데이터를 전달할 수 있습니다.

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

User 컴포넌트에서 파라미터를 가져오는 방법은 다음과 같습니다:

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

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

5.2 네비게이션

React Router에서는 링크를 사용해 페이지 이동을 처리할 수 있습니다.

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

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

5.3 프로그램적 네비게이션

useNavigate 훅을 활용해 코드에서 페이지를 이동시킬 수 있습니다.

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 로직 처리 후 이동
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>로그인</button>;
}

6. 마무리

React Router는 React 애플리케이션의 라우팅을 쉽게 구현할 수 있게 해주는 강력한 도구입니다. 이번 글에서는 React Router의 기본적인 사용법과 함께 간단한 예제를 통해 주요 기능을 소개했습니다. 앞으로 React Router의 고급 기능과 활용법을 더 깊이 공부해 보세요. 이를 통해 더욱 강력한 SPA를 개발할 수 있을 것입니다.