[React] Router란?

 

 

React Router: 페이지 네비게이션의 핵심 도구

개요

개발자들 사이에서 React는 동적이고 빠른 웹 애플리케이션을 만들기 위한 강력한 라이브러리로 인정받고 있습니다. 그러나 단일 페이지 어플리케이션(SPA)을 구축할 때, 여러 페이지 간의 네비게이션은 중요한 과제 중 하나입니다. React Router는 이러한 문제를 해결하기 위한 강력하면서도 유연한 도구로, React 기반의 웹 애플리케이션에서 페이지 간의 이동을 효과적으로 관리하는 데 사용됩니다.

React Router란?

React Router는 React 기반의 웹 애플리케이션에서 페이지 네비게이션을 처리하는 데 사용되는 라이브러리입니다. 이는 사용자가 애플리케이션에서 다양한 뷰로 이동할 수 있도록 도와주며, 브라우저의 주소 표시줄을 업데이트하고 컴포넌트를 렌더링함으로써 SPA의 장점을 최대한 활용할 수 있게 합니다.

React Router의 주요 컴포넌트

React Router는 여러 가지 컴포넌트로 구성되어 있으며, 주요한 몇 가지 컴포넌트를 살펴보겠습니다.

1. BrowserRouter: HTML5의 History API를 사용하여 브라우저의 URL을 관리하는 컴포넌트입니다. 이를 사용하여 라우팅을 구현합니다.
2. Route: 특정 URL에 대한 컴포넌트 매핑을 정의합니다. 즉, 특정 URL에 어떤 컴포넌트를 렌더링할지 결정합니다.
3. Link: 페이지 간의 하이퍼링크를 생성하는데 사용됩니다. 사용자가 클릭하면 라우터가 업데이트되어 해당 링크에 연결된 페이지로 이동합니다.

React Router의 간단한 예제

React Router를 사용하여 간단한 SPA를 만드는 예제를 살펴보겠습니다.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h2>홈 페이지</h2>;
const About = () => <h2>소개 페이지</h2>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li><Link to="/">홈</Link></li>
          <li><Link to="/about">소개</Link></li>
        </ul>
      </nav>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

export default App;
        

React Router의 심화 예제: 중첩된 라우트

React Router는 중첩된 라우트를 효과적으로 처리할 수 있습니다. 다음은 사용자 상세 정보를 보여주는 중첩된 라우트의 예제입니다.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const UserProfile = ({ match }) => (
  <div>
    <h3>사용자 상세 정보: {match.params.username}</h3>
  </div>
);

const Users = () => (
  <div>
    <h2>사용자 목록</h2>
    <ul>
      <li><Link to="/users/john">John</Link></li>
      <li><Link to="/users/jane">Jane</Link></li>
    </ul>

    <hr />

    <Route path="/users/:username" component={UserProfile} />
  </div>
);

const App = () => (
  <Router>
    <div>
      <Route path="/users" component={Users} />
    </div>
  </Router>
);

export default App;
        

결론

React Router는 React 애플리케이션에서 강력하고 유연한 페이지 네비게이션을 구현하기 위한 필수적인 도구입니다. 이를 통해 사용자는 웹 애플리케이션에서 자연스럽게 이동하고, URL을 통해 특정 페이지로 직접 접근할 수 있습니다. React Router를 잘 활용하면 사용자 경험을 향상시키고, 복잡한 SPA를 효율적으로 관리할 수 있습니다.