React Router: BrowserRouter vs. HashRouter

by

React 애플리케이션에서 라우팅을 처리하는 데 사용되는 React Router 라이브러리는 여러 가지 라우터 컴포넌트를 제공합니다. 그 중에서도 BrowserRouter와 HashRouter는 가장 많이 사용되며, 이들 간의 중요한 차이를 이해하는 것이 중요합니다.


BrowserRouter

1. HTML5 History API 기반

BrowserRouter는 HTML5 History API를 기반으로 라우팅을 처리합니다. 이것은 가독성이 높고 예쁜 URL을 사용할 수 있는 장점을 제공합니다. 예를 들어, /about과 같은 경로를 사용할 수 있습니다.

2. 서버 측 설정 필요

이 라우터를 사용하려면 서버 측에서 모든 경로에 대해 React 애플리케이션을 렌더링할 수 있어야 합니다. 이렇게 하면 새로고침 시에도 올바른 페이지로 이동할 수 있습니다. 서버 사이드 렌더링 (SSR)을 구현하는 데 이상적입니다.


3. 예시 코드

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

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


HashRouter

1. 해시(#) 기반 URL

HashRouter는 URL의 해시(#)를 사용하여 라우팅을 처리합니다. 예를 들어, /#/about과 같은 형태로 URL이 생성됩니다.


2. 서버 측 설정 불필요

이 라우터는 서버 측 설정이 필요하지 않으며, 정적 파일 호스팅 환경에서도 작동합니다.


3. 브라우저 뒤로 가기 및 앞으로 가기 지원

해시 기반 URL은 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 라우팅을 관리할 수 있게 해줍니다.


4. 예시 코드

import { HashRouter as Router, Route } from 'react-router-dom';

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



어떤 라우터를 선택해야 할까요?

  • BrowserRouter는 가독성 있는 URL을 사용하며, 서버 측 설정이 필요하며, SSR에 적합합니다.
  • HashRouter는 해시 기반의 URL을 사용하며, 서버 측 설정이 필요하지 않고, 정적 파일 호스팅에서 사용할 수 있으며, SPA나 정적 웹사이트에 적합합니다.

프로젝트의 요구 사항과 서버 환경에 따라 어떤 라우터를 선택할지를 결정해야 합니다. React Router의 강력한 기능을 활용하여 원하는 라우팅을 구현하세요.



Leave a Comment