React Router 사용법

React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 표준 라이브러리입니다.

이 절에서는 React Router의 설치부터 기본적인 사용법까지 다루겠습니다.

React Router 설치

React Router를 설치하려면 다음 명령어를 사용합니다.

npm install react-router-dom

기본 컴포넌트 사용법

React Router의 주요 컴포넌트들은 다음과 같습니다.

BrowserRouter : 라우팅 기능을 애플리케이션에 제공합니다.
Route : URL과 렌더링할 컴포넌트를 매핑합니다.
Link : 페이지 새로고침 없이 다른 경로로 이동할 수 있는 링크를 생성합니다.

사용 예

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 
function Home() {
  return <h2>Home</h2>;
}
 
function About() {
  return <h2>About</h2>;
}
 
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
 
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}
 
export default App;

정적 라우팅 vs 동적 라우팅

1. 정적 라우팅 : 미리 정의된 경로에 대한 라우팅

<Route path="/users" component={Users} />

2. 동적 라우팅 : URL 파라미터를 사용한 동적 라우팅

<Route path="/users/:id" component={User} />

동적 라우팅에서 파라미터 사용

function User({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

중첩 라우팅

중첩 라우팅을 사용하면 컴포넌트 내부에 하위 라우트를 정의할 수 있습니다.

function Users({ match }) {
  return (
    <div>
      <h2>Users</h2>
      <ul>
        <li>
          <Link to={`${match.url}/1`}>User 1</Link>
        </li>
        <li>
          <Link to={`${match.url}/2`}>User 2</Link>
        </li>
      </ul>
 
      <Route path={`${match.path}/:id`} component={User} />
    </div>
  );
}

프로그래밍 방식의 네비게이션

useHistory 훅을 사용하여 프로그래밍 방식으로 네비게이션을 구현할 수 있습니다.

import { useHistory } from 'react-router-dom';
 
function HomeButton() {
  let history = useHistory();
 
  function handleClick() {
    history.push('/home');
  }
 
  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Switch 컴포넌트

Switch 컴포넌트는 여러 Route 중 첫 번째로 매칭되는 하나만 렌더링합니다.

import { Switch, Route } from 'react-router-dom';
 
function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/:user" component={User} />
      <Route component={NoMatch} />
    </Switch>
  );
}

useParams 훅

useParams 훅을 사용하여 URL 파라미터에 쉽게 접근할 수 있습니다.

import { useParams } from 'react-router-dom';
 
function User() {
  let { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

NavLink 컴포넌트

NavLink는 현재 활성화된 링크에 스타일을 적용할 수 있는 특별한 종류의 Link입니다.

import { NavLink } from 'react-router-dom';
 
function Navigation() {
  return (
    <nav>
      <NavLink exact to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

리다이렉션

Redirect 컴포넌트를 사용하여 다른 경로로 리다이렉션할 수 있습니다.

import { Route, Redirect } from 'react-router-dom';
 
function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

라우트 보호하기

특정 조건(예 : 인증)에 따라 라우트에 대한 접근을 제어할 수 있습니다.

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{pathname: "/login", state: { from: props.location }}} />
        )
      }
    />
  );
}
 
// 사용
<PrivateRoute path="/dashboard" component={Dashboard} />

React Router는 React 애플리케이션에서 강력하고 유연한 라우팅 솔루션을 제공합니다.

기본적인 페이지 네비게이션부터 복잡한 중첩 라우팅, 동적 라우팅, 프로그래밍 방식의 네비게이션까지 다양한 시나리오를 처리할 수 있습니다.

라우팅을 효과적으로 사용하면 사용자 경험을 크게 향상시킬 수 있습니다. 페이지 간 빠른 전환, 동적 콘텐츠 로딩, 그리고 애플리케이션의 상태 유지 등이 가능해집니다.

React Router를 사용할 때는 항상 최신 버전의 문서를 참조하는 것이 중요합니다. 버전 간 API 변경이 있을 수 있으며, 새로운 기능이나 최적화된 방법이 소개될 수 있기 때문입니다.

마지막으로, 라우팅 구조를 설계할 때는 애플리케이션의 전체적인 구조와 사용자 흐름을 고려해야 합니다.

잘 설계된 라우팅은 사용자가 애플리케이션을 직관적으로 탐색할 수 있게 해주며, 개발자에게는 코드 구조화와 유지보수의 이점을 제공합니다.

이전으로 다음으로