해쉬 라우터와 브라우저 라우터의 차이점은 뭔가요?
도깨비젤리
·2022. 11. 16. 23:47
원문
What is the difference between HashRouter and BrowserRouter in React?
I am new to programming which makes things slightly difficult for me to understand if I read the official docs. I was reading about React Router 4 from here In this article, the author was talking ...
stackoverflow.com
번역
⛳ 질문
| 작성일 | 2018-08-22 |
| 추천수 | 186 |
프로그래밍이 처음이라 그런지 공식 문서를 봐도 조금 어려운 부분이 있습니다.
전 여기서 React Router 4에 관한 내용을 읽고 있는 중이었습니다.
이 아티클에서 저자는 `<HashRouter>`와 `<BrowserRouter>`에 관해서 설명을 하고 있습니다.
이하는 글 전문입니다:
HashRouter는 기본적으로 컴포넌트 랜더를 위해서 URL에 hash를 사용합니다. 만약 제가 단순한 정적인 한 페이지 짜리 웹(static one-page website)를 만드려고 하려면, 이걸 써야겠지요
BrowserRouter는 컴포넌트 랜더를 위해서 HTML5의 histroy API를 사용합니다. history는 pushState와 replaceState를 통하여 변경될 수 있습니다. 자세한 내용은 여기에서 확인할 수 있습니다.
전 도저히 이 둘의 의미와 용례를 이해하지 못하겠습니다.
저자가 말하는 history는 pushState와 replaceState를 통해 변경될 수 있다라는 말이나, URL에 있는 hash를 이용해 컴포넌트를 랜더한다는 말이 무슨 뜻인가요?
BrowserRouter를 설명한 첫번째 내용도 저에게 완전히 모호하지만, HashRouter를 설명한 두번째 내용은 아예 말도 안되는 것처럼 들립니다. 도대체 왜 컴포넌트를 랜더하기 위해서 해쉬를 쓴다는 말입니까?
👩💻 답변
🎈🎈채택답변🎈🎈
| 작성자 | Estus Flask |
| 추천수 | 223 |
| 작성일 | 2018/08/22 |
브라우저 라우터
이건 history API를 씁니다. histroy API는 레거시 브라우저 (IE 9 및 그 이하의 것들)에서는 동작하지 않습니다.
클라이언트 사이드 리액트 앱은 example.com/react/route와 같은 깔끔한 라우트를 유지할 수 있지만, 웹서버의 지원을 받을 필요가 있습니다.
보통 이 말인 곧 즉, 웹서버가 싱글 페이지 앱에 대해서 사전 설정이 되어있어야한다는 말입니다. 예를 들면 react/routh 패스나 모든 라우트(경로)에서 서버가 동일한 `index.html` 파일을 제공해야 한다는 것입니다.
한번 클라이언트 쪽에서는, `window.location.pathname`이 리액트 라우터에 의해 파싱됩니다. 리액트 라우터는 /react/route 경로를 위해 사전구성된 컴포넌트를 랜더 할 것입니다.
게다가, 이런 설정은 서버 사이드 랜더링에도 포함될 수 있습니다. index.html은 현대 경로와 관련된 구성요소 혹은 데이터가 포함할 수 있습니다.
해쉬 라우터
이건 URL hash를 사용합니다. 이 친구는 웹 서버나 브라우저의 제약없이 동작합니다. 서버 사이드 라우팅은 클라이언트 사이드 라우팅과 독립적으로 작동합니다.
싱글페이지 앱에서는 이 라우터를 example.com/#/react/route 의 꼴로 사용할 수 있습니다. 서버 사이드 랜더링를 사용한 백업 설정도 필요 없는데, 왜냐하면 서버 측에서는 / 경로만 받고 나머지 #/react/route URL hash는 서버측에서 읽을 수 없기 때문이죠.
한편 클라이언트 사이드에서는 window.location.hash가 리액트 라우터에 의해서 파싱 됩니다. 여기서 리액트 라우터는 브라우저 라워와 유사하게 /react/route에 맞는 컴포넌트를 랜더합니다.
가장 중요한 것은, 해쉬라우터의 용례가 SPA에 국한 된것이 아니라는 것입니다.
웹 사이트는 레거시 또는 검색엔진 친화적인 서버 측 라우팅을 가질 수 있는 반면, 리액트 애플리케이션은 example.com/server/side/route#/widget/route와 같은 URL에서 상태를 유지하는 위젯일 수 있기 때문이지요.
이 경우, 리액트 애플리케이션이 포함된 일부 페이지는 서버 측에서 /server/side/route를 위해 제공된 후 클라이언트 측에서 리액트 라우터는 이전 시나리오와 유사하게 /react/route를 위해 렌더링하도록 구성된 구성요소를 렌더링합니다.
마음에 드는 답변들
답변 1
| 작성자 | asishkhuntia |
| 추천수 | 10 |
| 작성일 | 2019/12/11 |
하나 더 추가 하고 싶은 용례가 있습니다. 브라우저 라우터나 라우터를 사용하든 관계없이, 노드 서버에서는 문제 없이 작동할 것입니다. 왜냐면 노드 서버는 클라이언트 라우팅을 이해하고 있기 때문이죠 (Preconfigured)
하지만 만약 리액트 앱을 아파치 서버 (그냥 GoDaddy에 올려진 PHP라고 합시다)에 빌드해서 올린다면, 라우팅은 생각한것 처럼 동작하지 않을 것입니다. 앱은 404 페이지로 떨어질 것이고, 이 시점에서 우리는 .htaccess file를 설정해줘야합니다. 그래야 비로서 모든 클릭과 url이 서버로 request를 전송 할 수 있을 것입니다.
이 경우에는 HASH 라우팅이 더 사용하기 좋을 것입니다. #는 html 콘텐츠로 이동하기 위해서 사용되는데, 컨텐츠로 이동하고 나면 더 이상 서버 요청을 보내지 않습니다
위의 시나리오에서는 # 뒤에 있는 모든 URL인 HashRouting을 사용할 수 있으며, 라우팅 규칙을 SPA로 사용할 수 있습니다.
답변 2
| 작성자 | Kumar |
| 추천수 | 17 |
| 작성일 | 2020/04/20 |
페이지를 새로 고치면 브라우저는 현재 경로를 사용하여 GET 요청을 서버로 보냅니다. #은 해당 GET 요청을 보내는 것을 방지하기 위해 사용되었습니다.
브라우저 라우터는 GET 요청이 서버로 전송되어야할 경우 많이들 사용합니다. 서버에서 라우터를 렌더링하려면 위치가 필요하기 때문이지요. ㅡ 즉, 라우트가 필요합니다. 이 라우트는 서버에서 라우터에 렌더링할 내용을 지시하는 데 사용됩니다. BrowserRouter는 경로를 동형으로 렌더링할 때 사용됩니다.
답변 3
| 작성자 | Sakhi Mansoor |
| 추천수 | 70 |
| 작성일 | 2018/08/22 |
서버 사이드 : HashRouter는 URL에서 해시 기호를 사용하며, 이는 서버 요청에서 모든 후속 URL 경로 내용이 무시되는 효과입니다. (즉, "www.mywebsite.com/#/person/john"을 전송하면 서버가 "www.mywebsite.com"을 가져옵니다). 결과적으로 서버는 사전 # URL 응답을 반환하고, 그 후 # 경로는 클라이언트 측 반응 응용 프로그램에서 처리(또는 구문 분석)됩니다.
클라이언트 사이드 : 브라우저 라우터는 URL에 # 기호를 추가하지 않지만 링크를 통해 접속하거나, 새로고침하려고 하면 문제가 발생합니다. 명시적인 경로가 클라이언트의 리액트 앱에 존재하지만 서버에는 존재하지 않는 경우, 다시 로드 및 링크(서버에 직접 도달하는 모든 것)는 404 에러를 반환합니다.
단상
해쉬 라우터는 URL에 # 가 나왔을 시, 이하 경로를 해석하지 않는 특징을 이용해 구현한 라우터이다.
http://www.tcpschool.com/html-tag-attrs/a-href
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
원래 URL에 #가 붙는 건 a 태그의 href에 같은 페이지의 id로 연결된 경우라, 서버가 URL에 #이 포함된 요청을 받으면 # 이하는 무시하고 응답을 한다.
해쉬라우터의 구현은 (아마도) 이 특성을 이용해서 이루어진 것으로 생각된다.
반면, 브라우저 라우터는 window.location의 replace 메서드를 활용해서 구현된 것이 아닌가 하는 생각이 든다.
아무튼, 이번 질문을 번역하면서 가장 궁금했던 것. 왜 하필 라우터 구현에 # 를 사용하는 것이고, 왜 해쉬라우터를 사용한 경우는 URL 창에 주소를 직접 입력해도 바로 접속이 되는데, 브라우저 라우터를 사용하면 따로 웹서버 셋팅을 하지 않는 한 404 에러가 나는지 이해할 수 있었다
'STO 번역' 카테고리의 다른 글
| 웹소켓과 일반 소켓의 차이는 뭔가요? (0) | 2022.10.20 |
|---|---|
| npx와 npm의 차이는 뭔가요? (0) | 2022.10.17 |
| 타입스크립트 : 커스텀 타입을 체크하는 방법 (0) | 2022.10.12 |
| Prettier를 vscode extension으로 사용할 때와 npm 패키지로 사용할 때의 차이점? (0) | 2022.10.09 |
