React HashRouter


HashRouter
는 React Router 라이브러리에서 제공하는 컴포넌트 중 하나로, 웹 애플리케이션의 클라이언트 사이드 라우팅을 관리합니다. HashRouter는 URL의 해시(#) 부분을 사용하여 다른 뷰나 컴포넌트로의 라우팅을 처리합니다. 이 방식은 싱글 페이지 애플리케이션(SPA)에서 페이지를 새로 고침하지 않고도 내비게이션을 가능하게 합니다.

작동 방식:

  • HashRouter는 URL의 해시 부분 (예: #about, #contact)을 사용하여 애플리케이션의 상태를 나타냅니다. 브라우저는 URL의 해시 부분이 변경될 때 페이지를 새로고침하지 않기 때문에, HashRouter는 이러한 변화를 감지하고 해당하는 컴포넌트를 렌더링합니다.
  • 사용자가 링크를 클릭하거나 프로그래매틱하게 라우트를 변경할 때, HashRouter는 URL의 해시 부분만 변경하고, 페이지 리로드 없이 해당하는 컴포넌트를 렌더링합니다.
  • 해시 변경은 브라우저의 히스토리에 기록되므로, 사용자는 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 애플리케이션 내에서 이동할 수 있습니다.

장점:

  • 서버 설정이 불필요: HashRouter는 서버 측에서 특별한 설정이 필요 없기 때문에, 정적 파일 서버나 서버 설정을 변경할 수 없는 환경에서 유용합니다.
  • 구형 브라우저 호환성: HTML5 히스토리 API를 지원하지 않는 구형 브라우저에서도 잘 동작합니다.
  • 간단한 구현: 클라이언트 사이드에서 모든 라우팅을 처리할 수 있으므로, 간단한 SPA 개발에 적합합니다.

단점:

  • SEO 문제: 해시 라우팅은 검색 엔진이 페이지의 콘텐츠를 제대로 인덱싱하는 데 어려움을 줄 수 있습니다. 이는 검색 엔진이 전통적으로 해시를 페이지 내 앵커로 취급하기 때문에 발생합니다.
  • URL의 미관: URL에 해시(#) 기호가 포함되어 있어서, 보다 깔끔한 URL을 선호하는 경우에는 적합하지 않을 수 있습니다.

HashRouter는 주로 서버 설정을 변경할 수 없거나 구형 브라우저와의 호환성이 필요한 경우에 사용됩니다. 그러나 모던 웹 개발에서는 BrowserRouter를 사용하는 것이 더 일반적입니다, 특히 SEO와 깨끗한 URL 구조가 중요한 경우에는 더욱 그렇습니다.