[HTTP] URL Fragment와 Hash Router (feat. #)

URL Fragment 개념 및 사용예제

'HTTP 완벽 가이드: 웹은 어떻게 동작하는가'에 따르면 Fragment는 URL에서 해시(#) 문자에 이어서 오는 것이다. URL Fragment를 주로 볼 수 있는 곳은 공식문서다. 사이드바에서 특정 개념을 클릭하면 동일한 페이지에서 스크롤이 이동하며 해당 개념의 설명이 있는 곳으로 이동하는 경우가 많은데, 보통 이럴 때 URL을 잘 살펴보면 #타겟_개념으로 이어지는 경우가 많다.

 

이미지와 링크로 다시 이야기하자면, 아래 이미지는 Next.js 공식문서의 한 부분을 캡처했다. Creating UI를 선택 시 URL이 아래와 같이 바뀐다. #creating-ui가 바로 fragment이다.

 

https://nextjs.org/docs/app/building-your-application/routing/defining-routes#creating-ui

Next.js URL Fragment 사용 예제

 

URL Fragment의 특징과 Hash Router

fragment를 사용할 경우 페이지가 갱신되지 않는다. 새로고침이 되거나 페이지가 이동하지 않기 때문에 서버에 어떤 요청도 보내지 않는다. 이러한 특징으로 인해 SPA에서 라우팅을 할 때 활용되기도 한다. 특히 Vue나 Svelte를 사용할 때 url에 hash가 붙는 것을 많이 확인할 수 있었는데 이 또한 hash를 활용해서 routing을 처리하기 때문이다. react-router에는 HashRouter라는 이름으로 존재하는데, 공식문서에 따르면 react-router는 URL을 서버에 보내고 싶지 않거나 보내면 안 되는 경우와 같이 명확하게 HashRouter가 필요할 때만 HashRouter를 사용할 것을 권장한다. 그 외에는 react-router의 다른 라우팅을 사용하면 된다. (ex. Browser Router)

We strongly recommend you do not use HashRouter unless you absolutely have to.
*react-router 공식문서 : https://reactrouter.com/en/main/router-components/hash-router