[React Router] react-router-dom의 HashRouter과 BrowserRouter의 차이 (BrowserRouter 를 사용하자!)

오늘 알아볼 것은 react-router-dom의 HashRouter과 BrowserRouter이다.

 

React router에는 많은 라우터가 있지만 오늘은 두 가지 Router에 대해서 비교해볼 것이다.

 

게다가 오늘은 코드보다는 좀 더 깊은 이론과 관련된 내용을 알아보도록 하자.

리액트 라우팅에 관해서는

• 리액트가 페이지를 라우팅하는 방법(1)
• 리액트가 페이지를 라우팅하는 방법(2)
• 리액트가 페이지를 라우팅하는 방법(3)
  에서 설명이 나와있으니 개념이 확실하지 않거나 다시 한 번 보고싶은 사람은 한 번 가서 확인하는 것도 추천한다.

Router

우선 두 라우터간의 차이를 알기 전에 가볍게 <Router>에 대해서 알아보자.

Router은 모든 Router 컴포넌트의 인터페이스이다.

 

Router에는 기본적인 라우팅 관련 속성만 정의되어있기 때문에

 

우리는 다음과 같은 라우터를 사용하게 된다.

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>
• <NativeRouter>
• <StaticRouter>

 

Router에는 history 객체를 이용해서 네이게이팅을 한다.

reactrouter.com

이제 BrowserRouter과 HashRouter에 대해서 이야기 해보자.

BrowserRouter vs HashRouter

 

HashRouter

reactrouter.com

HashRouter의 가장 큰 특징은 다음과 같다.

• 주소에 해쉬(#)가 붙는다.
• 검색 엔진이 읽지 못한다.

URL Hash를 사용하 HashRouter는 지원되는 브라우저나 웹 서버에 제한이 없다.

 

하지만 위에서 말 한 것 처럼 example.com/#/messages/messages과 같이 주소에 해쉬가 붙게 된다.

 

HashRouter은 URL 해시를 서버에서 읽을 수 없기 때문에 Server Side Rendering으로 설정을 백업할 수는 없다.

 

또한 HashRouter은 해시 히스토리를 지원하지 않는다.

 

BrowserRouter

reactrouter.com

 

• Link 컴포넌트로 to 속성에 이동할 경로를 써준다.
• Route 컴포넌트 path 속성을 Link의 to속성을 component mapping 경로를 기술한다.
• 새로고침 하면 경로에서 못 찾아 에러가 난다.

대부분 레거시 브라우저(IE9 이하)에서는 사용할 수 없다

 

BrowserRouter은 History API를 사용해야 한다.

그럼 무엇을 사용해야 할까

사실 많은 React 코드에서 Routing 하는 로직을 살펴보면 BrowserRouter이 압도적으로 많은 것을 알 수 있다.

 

이 이유는 매우 간단한데, 예전에는 사람들이 URL 위치를 변경하는데 javascript를 사용할 수 없었다.

그래서 HashRouter를 사용했고 최근에는 BrowserRouter가 탄생했고 많은 사람들이 HashRouter를 더 이상 사용하지 않는다.

 

위에서 말 했듯 HashRouter는 History location을 지원하지 않기 때문에 많은 불편함이 있다.

 

반면에 BrowserRouter에서는 History location을 지원해서 다양한 기능을 사용하여 멋진 웹을 만들 수 있게 된 것이다.