React Router의 Hash Router와 Browser Router

1. React Router의 Hash Router와 Browser Router

 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다.

이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다.

간단하게 두 라우터의 차이를 짚어보면 다음과 같다.

 

Hash Router

• 주소에 해쉬(#)가 붙는다.
• 검색 엔진이 읽지 못한다.
• 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다.

 

Browser Router

• History API를 사용한다.
• 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다.

 

 Hash Router는 검색 엔진 최적화가 지원되지 않기 때문에 사용하지 않는 것이 좋다. 그럼에도 불구하고 이전 두 개의 미션에서 Hash Router를 쓴 이유는 바로 경로 찾기 문제 때문이다.

 

 Browser Router를 별도의 서버 설정 없이 사용하면 새로고침이나 올바르지 않은 URL 접근을 리디렉션 할 때 404 에러가 발생한다. 이는 우리가 만든 앱이 SPA이기 때문에 발생한다. SPA는 기본적으로 하나의 entry point를 가진다. 도메인에 접근하면 클라이언트는 서버로부터 index.html과 JS, CSS 파일 등을 전달받고 이를 실행시킨다. 기본적으로 한번의 페이지 로드만이 존재하고 이후부터는 History API에 의해 렌더링 될 뿐이다.

 

 Brower Router를 사용할 때 도메인의 루트 주소에서의 새로고침은 전혀 문제되지 않지만 다른 path에서의 새로고침이나 리디렉션이 불가능한 이유는 바로 여기에 있다. 우리가 다른 path에서 새로고침을 하게 되면 브라우저는 도메인 주소를 보고 우리의 서버를 찾아간 뒤 path를 보고 path 명과 같은 디렉토리를 찾는다. 하지만 우리의 앱은 서버사이드 렌더링이 아니기에 path명과 같은 폴더를 가지지 않을 뿐더러 그 안에 index.html이 존재하지도 않는다. 결국, 브라우저는 렌더링에 필요한 파일을 서버로부터 찾지 못했기 때문에 404 에러를 띄운다.

 

 그렇다면 Hash Router는 어떻게 새로고침이나 리디렉션의 문제로부터 자유로울 수 있는 것일까? 그것은 바로 브라우저가 서버에 요청을 보낼 때, # 이전의 도메인 주소로 요청을 보내기 때문이다. Hash Router는 # 이후에 path가 오도록 만든다. Hash Router를 사용하게 되면 다음과 같은 URL 주소를 가진다.

 

www.your-domain.com/#/path/1

 

 따라서 Hash Router를 사용하면 # 뒤에 path가 오기 때문에 새로고침과 리디렉션을 해도 모두 올바른 entry point로 요청이 갈 수 있게 된다.

 

 그렇다면 Browser Router에서는 새로고침과 리디렉션 404 에러를 해결할 수 있는 방법이 없는 것일까? 그것은 아니다. 앞서 언급했듯이 서버에서 별도의 설정을 하면 된다. '호곡, 서버 설정이라니 너무 어려운 것 아닐까?' 라고 생각할 수 있지만 의외로 간단하게 해결이 가능하다.

 

 정적 페이지 배포에 자주 쓰이는 netlify를 예시로 어떻게 서버 설정을 할 수 있는지 알아보자.

 리액트 프로젝트의 public 폴더에 'netlify.toml'이라는 파일을 생성한 뒤 다음과 같은 코드를 입력한다.

 

[[redirects]]   
  from = "/*"   
  to = "/index.html"   
  status = 200

 

 이렇게 작성하면 netlify 서버에서 다른 path로 들어온 모든 요청에 대해 index.html로 리디렉션 해준다. 따라서 Browser Router를 사용하더라도 새로고침과 리디렉션 시 우리가 원하는 entry point로 진입하고 React Router가 path를 읽어드려 우리가 원하던 페이지를 렌더링 할 수 있게 된다.