늘 겸손하게

React Router, BrowserRouter와 HashRouter 차이 본문

Programming/React

React Router, BrowserRouter와 HashRouter 차이

besforyou999 2022. 6. 30. 14:35

 

React의 Router와 BrowserRouter와 HashRouter에 대한 간단한 설명과 BrowserRouter와 HashRouter에 대한 차이점을 소개하겠습니다.

 

1. React Router

 

Routing이란? 

 

요청한 URL에 맞는 웹 페이지를 보여주는 일을 말합니다. 이러한 라우팅을 담당하는 컴포턴트를 Router라고 부릅니다.

 

2. BrowserRouter

 

BrowserRouter는 웹 브라우저에서 실행되는 React Router를 위한 인터페이스로 추천됩니다. BrowserRouter는 URL을 이용해 현재 위치를 브라우저의 주소창에 저장하고 브라우저에 내장되어 있는 history 스택을 이용해 URL를 탐색합니다.

 

3. HashRouter

 

HashRouter는 URL이 서버에 전송되지 못하거나, 전송되면 안되는 경우에 사용됩니다. 이런 경우는 서버에 대한 통제가 없을때 발생합니다. 이런 상황에서 HashRouter는 현재 위치를 서버에 절대 전송하지않고 URL의 해시 부분에 저장하는것이 가능합니다.

 

BrowserRouter와는 다르게 URL에 #가 추가됩니다. 웹 서버는 # 문자 뒷부분의 주소를 무시합니다. 하지만 자바스크립트를 이용해 # 뒷부분의 내용을 알 수 있기 때문에 react-router-dom은 URL을 읽어서 적절한 컴포넌트로 라우팅해 줄 수 있습니다.

 

4. 그러면 어떤 라우터를 사용할까?

 

웹 서버는 사용자가 어떤 경로(path)를 통해 접속을 시도해도 동일한 웹 페이지를 서비스할 수 있어야합니다. 어떤 경로(path)로 들어오든 루트 페이지에 있는 HTML 파일을 서비스할 수 있다면 BrowserRouter를 사용하고, 그렇지 않다면 HashRouter를 사용하면 됩니다.

'Programming > React' 카테고리의 다른 글

React JSX '&' 작성  (0) 2022.06.30
React NavLink  (0) 2022.06.30
create-react-app Render가 두 번될때 ( console.log 두번 출력될때 )  (0) 2022.05.10
npx create-react-app  (0) 2022.05.10
Why React?  (0) 2022.05.10
'Programming/React' Related Articles more