[React] BrowserRouter VS HashRouter

BrowserRouter VS HashRouter

강의에서도 그렇고 책에서도 그렇고 라우터를 사용할 때 이때는 이 라우터가 좀 더 효율적이고,,,이런 말들이 많았다. 나는 이 설명들이 한 번에 이해가 안갔기 때문에 라우터에 대해서 정리해보려고 마음을 먹었다.

일단 이 무비 웹을 만드는데 비교했었던 라우터는 BrowserRouter와 HashRouter 이 두 개이다. 그래서 이 두개를 먼저 정리해보려고 하는데 이 사이트를 참고해서 작성해보았다.

위의 코드를 보면서 설명을 해보려고한다.

 

---

Router

라우터에는 기본적인 라우팅 속성들만 정의되어있기 때문에 아래처럼 5가지 라우터를 사용하는 것이다.

• BrowserRouter
• HashRouter
• MemoryRouter
• NativeRouter
• StaticRouter

그 중에서 오늘은 BrowserRouter와 HashRouter에 대해서 설명하겠다.

 

BrowserRouter

import React from 'react'; 
import { BrowerRouter, Route, Link } from 'react-touter-dom'; 
import TestChild from './TestChild'; 

const Test () => { 
	return ( 
		<BrowserRouter> 
			<Link to="주소">라우터보기</Link> 
			<Route path="./경로" component={TestChild}></Route> 
		</BrowserRouter> 
	) 
};

<BrowserRouter></BrowserRouter>로 감싸줘서 사용해야 한다.

일단 <Link to= >에서 = 뒤에 이동할 경로를 써준다. 하지만, Link는 페이지 이동이라기보다 보여지게 흉내내는 것이라고 할 수 있다. 그렇기 때문에 Link는 페이지의 전환을 방지해서 처음부터 렌더링되는 대참사를 막아준다.

하지만, 이 주소에서 새로고침을 하면 경로에서 못 찾아 에러가 난다.

그렇기 때문에, BrowserRouter는 History API를 사용해서 서버의 추가적인 세팅으로 해결해줄 수 있다.

따라서, BrowserRouter는 동적인 페이지에 주로 사용된다.

 

www.domain.com/path 

BrowserRouter사용시 url은 위와 같이 접속하게 된다.

 

HashRouter

www.domain.com/#/path 

BrowserRouter와 유사하지만 주소 사이에 # 해쉬값이 들어간다.

url이 위와 같이 이루어지게 되는데 #이전의 www.domain.com 에 대한 요청만 서버가 받아들이게 되므로

주소 이동후, 새로고침해도 에러발생 X

검색엔진이 읽지 못함

서버에 요청이 가지 않는다 -> 백엔드 서버가 필요하지 않는 상황 (정적인 페이지)에서 주로 사용됨

-> 서버가 주소의 이동을 모르게 됨 (페이지 존재유무에 대해서 모름)

import React from 'react';
import { HashRouter, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route path="/movie/:id" component={Detail} />
    </HashRouter>
  )
}

위의 코드처럼 <HashRouter></HashRouter>로 감싸줘야하며 위에 써놓은 것과 같은 특징을 지니고 있어 정적인 페이지에 사용된다.

 

---

뭔가 이제 좀 이해가 되는것같다. 뭔가 감이 좀 덜 오는 것 같은데 빨리 더 공부해보고 내가 직접 몸소 느껴보고 싶다. 근데 뭔가 이게 정확한가 의문이 들어서 혹시 이 글을 보시는 분들 중에 뭔가 잘못 됐다고 느끼시는 분이 있다면 댓글로 알려주세요ㅠ