BrowserRouter vs HashRouter ?

 

SPA(Single Page Application)를 개발할 때, 리액트 라우터(React Router)를 이용해서 라우팅을 구현합니다. 리액트 라우터에서는 두 가지 라우터를 제공합니다.

바로 BrowserRouter와 HashRouter입니다.

BrowserRouter vs HashRouter ?

 

BrowserRouter

BrowserRouter는 HTML5의 History API를 이용해서 UI를 업데이트합니다. History API를 사용하면 웹 페이지를 다시 로드하지 않고 URL을 업데이트할 수 있습니다. 예를 들어, 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 브라우저는 이전 페이지로 돌아가지만 페이지를 다시 로드하지 않습니다.

BrowserRouter는 서버에서 URL을 요청할 때, 서버는 어떤 페이지도 찾을 수 없다는 404 Not Found 오류를 보내야 합니다. 그 이유는 BrowserRouter는 클라이언트 측에서만 작동하기 때문입니다. 따라서 서버 측에서 모든 요청에 대해 항상 index.html 파일을 반환하도록 설정해야 합니다.

BrowserRouter를 사용하면 URL에서 해시(#) 기호가 제거됩니다. 이를테면, localhost:3000/users와 같은 URL이 됩니다. 이렇게 URL에서 해시(#) 기호가 제거되기 때문에, 검색 엔진 최적화(SEO)를 위한 설정이 필요합니다.

HashRouter

HashRouter는 URL의 해시(#) 기호를 이용해서 UI를 업데이트합니다. 해시(#) 기호는 URL에서 경로와 쿼리 문자열을 구분하는 문자입니다. 예를 들어, localhost:3000/#/users와 같은 URL을 가집니다.

HashRouter는 서버 측에서 사용할 수 있으며, 서버 측에서는 모든 요청에 대해 index.html 파일을 반환합니다. 그 이유는 해시(#) 기호는 클라이언트 측에서만 해석되기 때문입니다.

HashRouter를 사용하면 URL에 해시(#) 기호가 포함되기 때문에 검색 엔진 최적화(SEO)에 대한 문제가 발생하지 않습니다. 따라서, 페이스북 같은 사이트에서는 HashRouter를 사용합니다.

 

BrowserRouter vs HashRouter?

BrowserRouter와 HashRouter는 React Router에서 제공하는 라우터입니다. 두 라우터는 모두 사용할 수 있지만 각각의 장단점이 있습니다.

BrowserRouter는 URL 경로를 통해 라우팅을 처리하기 때문에 URL 경로에 대한 이해도가 필요합니다. 그러나 이를 이용하면 보다 깔끔하고 직관적인 URL을 사용할 수 있습니다.

반면, HashRouter는 URL의 해시(#) 뒤에 오는 경로를 사용하여 라우팅을 처리합니다. 이는 브라우저 호환성이 매우 높아 예전 버전의 브라우저에서도 잘 동작합니다. 그러나 이전 버전의 브라우저에서는 URL 변경 시 페이지를 새로고침해야 하기 때문에 성능에 문제가 있습니다.

따라서, 프로젝트의 성격과 필요에 따라 적절한 라우터를 선택하여 사용하는 것이 중요합니다.