React Router 3가지의 특징들

React Router에서 제공하는 BrowserRouter, HashRouter, MemoryRouter 이 세 가지 라우터는 각기 다른 시나리오와 요구 사항에 맞춰 설계되었습니다.

다음은 이 세 가지 라우터의 주요 특징과 차이점에 대한 비교입니다.

BrowserRouter:

• 특징: HTML5의 history API를 사용하여 UI를 URL과 동기화합니다.
• 장점:
  • 깨끗하고 읽기 쉬운 URL 제공.
  • 서버 사이드 렌더링과의 호환성이 좋으며 SEO에 유리.
  • 사용자가 기대하는 웹 브라우징 경험(예: 뒤로 가기, 앞으로 가기 버튼 사용)을 제공.
• 단점:
  • 서버에서 모든 요청을 index.html로 리다이렉트하도록 설정해야 합니다.
  • 정적 파일 서버에서는 직접 사용하기 어려울 수 있음.
• 사용 시나리오: 서버 구성이 가능하고, SEO와 깨끗한 URL 구조가 중요한 웹 애플리케이션.

HashRouter:

• 특징: URL의 해시 부분을 사용하여 페이지를 관리합니다.
• 장점:
  • 서버 설정이 필요 없어 간단한 정적 웹 사이트에 적합.
  • 구형 브라우저와의 호환성이 좋음.
  • URL 변경 시 페이지 리로드가 필요 없음.
• 단점:
  • 해시 부분 때문에 URL이 덜 깨끗해짐.
  • SEO에 불리할 수 있음.
  • 사용자 경험이 BrowserRouter에 비해 떨어질 수 있음.
• 사용 시나리오: 서버 설정 변경이 어렵거나, 구형 브라우저 호환성이 필요한 경우.

MemoryRouter:

• 특징: 라우팅 정보를 메모리에 저장하여 URL 변경 없이 라우팅을 관리합니다.
• 장점:
  • URL이 변경되지 않아 사용자와 서버 사이의 상태가 URL에 의존하지 않음.
  • 테스트나 서버 사이드 렌더링에서 유용함.
• 단점:
  • 사용자가 브라우저의 뒤로 가기와 앞으로 가기 버튼을 사용할 수 없음.
  • 사용자의 브라우징 히스토리가 유지되지 않음.
• 사용 시나리오: 테스트 환경, 서버 사이드 렌더링, 또는 URL 변경 없이 앱 내에서 라우팅을 관리해야 하는 경우.

비교:

• 서버 설정: BrowserRouter는 서버 설정을 필요로 하지만, HashRouter와 MemoryRouter는 그렇지 않습니다.
• URL 구조: BrowserRouter는 깨끗한 URL을 제공하는 반면, HashRouter는 URL에 해시(#)를 포함합니다. MemoryRouter는 URL을 전혀 변경하지 않습니다.
• SEO: BrowserRouter가 SEO에 가장 유리하며, HashRouter는 덜 유리하고, MemoryRouter는 SEO와 관련이 없습니다.
• 브라우저 호환성: HashRouter는 구형 브라우저와의 호환성이 가장 좋습니다.
• 사용자 경험: BrowserRouter와 HashRouter는 사용자가 브라우저의 내비게이션 버튼을 사용할 수 있게 해주지만, MemoryRouter는 그렇지 않습니다.

각 라우터는 특정 상황에 맞게 설계되었으므로, 애플리케이션의 요구 사항에 따라 적절한 라우터를 선택하는 것이 중요합니다.