BroswerRouter와 HashRouter의 차이점

리액트에서 라우팅은 보통 react-router-dom을 사용한다. 이 react-router-dom은 두 가지의 라우터를 제공한다.

공식문서에서는 BroswerRouter가 현재 브라우저의 위치를 받아사 브라우저의 history스택을 이용해 이동한다고 한다.

 

하나씩 살펴보자.

export interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  window?: Window;
}

먼저 BrowserRouterProps는 basename이라는 기본 URL을 받고 children이라는 라우터의 자식이 되는,

랜더링 될 리액트 노드를 받고 window를 사용하고 있다.

 

 let historyRef = React.useRef<BrowserHistory>();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory({ window, v5Compat: true });
  }

  let history = historyRef.current;
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

@remix-run/router 패키지의 BrowserHistory를 useRef로 참조를 historyRef에 처음에 저장한다.

historyRef.current가 비어있다면 createBrowserHistory의 반환 값을 historyRef.current에 할당한다.

 

createBrowserHistory함수는 다음과 같다.

createBrowserHistory는 BrowserHistory를 반환하는데, 이 객체는 브라우저의 스택을 활용해서 브라우징을 추적하는 객체이다. HTML5의 history interface를 지원하는 웹에서 지원되는 것을 알 수 있다.

 

그리고 pushState,replaceState,popstate 이벤트가 나오는데, 브라우저의 스택으로 어떻게 사용자의 이동을 추적하고,

이 이벤트들에 대해서 궁금해졌다.

 

먼저 pushState이벤트는 브라우저 히스토리 스택에 상태를 추가한다. 

이전 주소에, 새로운 주소를 스택에 추가해서, 이전 주소가 남아있기 때문에 뒤로 가기로 이전 주소로 돌아갈 수 있다.

pushState(state, unused)
pushState(state, unused, url)

replaceState는 브라우저 히스토리 스택에 제일 위에 있는 원소를 바꾼다.

예를 들어서 홈 ->게시판->로그인 순으로 주소를 이동시켰다고 생각해보자.

 

로그인에서 push('/게시판')을 하게되면 히스토리 스택은 홈 -> 게시판 -> 로그인 ->게시판이 된다

반면 replace('/게시판')을 하게되면 스택은 현재의 로그이니 대신 홈 -> 게시판 -> 게시판이 된다

---

결과적으로 history.listen을 통해 이벤트가 발생할떄마다 setState로 브라우징 히스토리의 변화를 감지하고 갱신한다.

 

https://gist.github.com/siakaramalegos/df4620c52e829f6107c75d5c3f0ad7f5

Basic example of React Router: BrowserRouter, Link, Route, and Switch

위의 예시는 간단한 BrowserRouter의 사용 방법을 나타낸 것이다.

 

그러면 이제 HashRouter에 대해 살펴보자.

구조는 전반적으로 비슷하나, 달라진 점이 있다면 createBrowserHistory,BrowserHistory가 각각 createHashHistory,HashHistory로 바뀐것이다. 

 

createHashHistory함수는 다음의 형태를 갖고 있다.

 

HashHistory 인스턴스를 반환하는데, browser history와 가장 다른 점은 URL의 해시 부분이 저장된다는 것이다.

 

밑의 /about이 URL의 해시 부분에 해당한다.해시 히스토리는 현재 주소의 URL 해시 부분을 저장한다.

https://example.com/#/about

그래서 이 URL의 해시 부분이 바뀌면 아까와 마찬가지로 history.listen()으로 브라우저의 해시 변경을 감지하고,

setState가 동작하는 것을 볼 수 있다.

---

그래서 어떨 떄 HashRouter를 쓰고 어떨 떄 BrowserRouter를 써야 할까?

간단한 정적인 페이지에서는 HashRouter를 쓰는 것이 좋고 BrowerRouter는 동적인 웹 페이지에서 효과적이다.

https://minjoo-space.tistory.com/61

[React] BrowserRouter VS HashRouter

 

나는 간단하고 정적인 페이지를 만들고 있어서 HashRouter를 사용하였다.