Hash
url 에서 hash 란 주소의 # 뒤에 연결된 식별자를 말한다.
https://developer.mozilla.org/ko/docs/Web/API/URL/hash#예제
위 링크에서 #뒤의 예제가 url 의 hash 값이다.
mdn 사이트에서는 목차를 클릭할 경우, hash 라우팅을 통해 해당 #{목차}로 이동할 수 있도록 되어있고, 목차를 id로 사용해 링크로 진입하면 바로 메뉴로 이동할 수 있도록 만들어져있다.
|
1
2
3
|
<h2 id="예제">
<a href="#예제">예제</a>
</h2>
|
cs |
해시 라우터
- URL 의 #뒤의 해시를 활용해 페이지를 이동하는 라우터이다.
- 해시를 사용하면 #를 통해 이동한 경로가 아닌 이전 경로를 사용해 웹페이지를 받아온다.
- 별도의 서버 설정이 필요하지 않고, 새로고침시 오류가 발생하지 않는다.
라는 장점이 있다.
하지만 요즘 대부분의 사이트에서는 페이지의 특정 위치를 공유하는 용도가 아니면 해시 라우터를 사용하지 않는다. 왜냐하면
검색엔진에 최적화 되어있지 않기 때문이다.
해시 라우터 는 해시가 어떤 값을 가지든 상관없이 해시를 제외한 동일한 경로를 URL 로 가진다. 해시(#) 뒤의 경로는 클라이언트에서만 처리하는 부분이므로 검색엔진에서는 값을 알 수가 없어 검색할 수 없게 된다.
브라우저 라우터
- 경로 이동을 /뒤의 파라미터를 통해 이동하는 라우터이다.
- URL이 더 직관적이며, 검색엔진에 최적화되어있다.
- 이동할 때마다 새로고침이 발생한다.
- 서버에서 모든 요청을 메인 html 파일로 리디렉션이 필요하다.
따로 서버가 존재하고, 검색엔진 최적화가 필요한 경우에는 브라우저라우터,
간단한 설정으로 서버 작업이 없고, 검색엔진 최적화가 중요하지 않은 경우에는 해시라우터를 사용하는 것이 좋다.
'React' 카테고리의 다른 글
| 해피 저금통 만들기 피드백 (0) | 2022.06.13 |
|---|---|
| [React] localStorage 사용하기 (0) | 2022.06.02 |
| [React] Modal 만들기(2) 외부화면 스크롤 방지하기 (0) | 2022.05.17 |
| [React] Modal 만들기(1) CSS, 외부클릭 방지 (2) | 2022.05.16 |
| [React] 여러 개의 input 값 관리하기 (0) | 2022.05.12 |