[React] BrowserRouter vs HashRouter 비교

개요

• 실무 프로젝트에서 라우팅 경로가 설정되지 않은 경로로 진입했을 경우 404에러를 발생하는 문제가 있었다.
• 이를 해결하고자 404 에러를 발생하지 않는 방법을 찾기위해 디버깅을 시작했다.
• 라우팅 경로가 설정되지 않은 경로로 진입시 에러를 발생시키는 이유는 BrowserRouter를 사용하기 때문이라는 이유를 알게되었다.
• 그럼 BrowserRouter와 HashRouter가 서로 어떻게 다른지 궁금해졌다.

BrowserRouter

BrowserRouter는 브라우저 주소창 속 clean URL을 사용하는 현재 위치를 저장한다. 그리고 브라우저 내장 히스토리 스택을 이용하여 경로를 이동한다.

• 새로고침하거나 URL로 직접 접근할 경우 경로를 찾지 못해 에러가 발생한다. (이를 해결하려면 서버에 추가적인 셋팅이 필요)

HashRouter

우선 웹 페이지에서 Hash(해쉬)란, URL의 일부분으로 사용되는 문자열이다. 보통 URL 끝에 #과 함께 붙어서 사용되는데 해쉬는 서버로 새로운 페이지 요청하지 않고 다른 페이지로 이동하는 것을 가능하게 한다.

 

예를 들어, 웹 페이지 내의 특정 섹션으로 이동할 때 href에 '#'를 사용한 적이 있을 것이다.

 

HashRouter는 URL이 서버로 보내지지 못하거나 혹은 보내지면 안되는 이유가 있을 때 사용된다. HashRouter는 현재 위치를 현재 URL의 hash 부분에 저장하는 것이 가능하다. 그러므로 이는 서버로 절대 보내지지 않는다.

 

- React-Router 팀에서는 절대적으로 필요한 경우가 아니라면 HashRouter 사용을 추천하지 않는다.

 

비교	BrowserRouter	HashRouter
브라우저 내장 함수 사용 (ex. DOM History API)	O	X
SEO 성능	높음	낮음
Full URL 사용	O	X
Server Rendering 성능	높음	낮음

 

예전에는 DOM History API가 없을 때, 해쉬를 사용하여 SPA를 구현하여 사용했었다. 하지만 DOM History API가 등장하고 브라우저 내장 기능으로 SPA가 구현 가능해진 지금 굳이 HashRouter를 사용할 이유는 드물다.