react-router는 클라이언트 상에서 라우팅 처리를 하게 만들어주는 라이브러리입니다.
react-router를 사용하여 URL를 변경하면 브라우저 상에서는 URL이 바뀌지만 서버에는 어떠한 요청도 보내지 않습니다.
<aside> 💡 react-router는 지정된 URL의 경우 브라우저를 속여 URL변경으로 인한 페이지 요청의 새로고침 없이 CSR을 가능하게 해준다. 즉, URL을 주소창에 띄워 보여줄 뿐이다.
</aside>
따라서 서버에서는 클라이언트상에서 URL을 바꿨다는 사실을 알지 못합니다.
그런데 react-router를 쓰더라도 서버 쪽에서도 라우터는 필요합니다. 그러면 react-router를 사용하는 경우, 어떨 때 react-router가 적용되고 어떨 때 서버의 router가 적용되는 걸까?
이것은 사실 SPA(Single Page Application)의 개념을 이해하는 것과 깊은 관련이 있는 이슈입니다.
SPA는 단 한 개의 HTML 파일만 가지고 어떤 URL 요청이 들어와도 그 하나의 파일만으로 응답합니다. 최초 사용자가 HTML 파일을 받게 되고, 이후 어떠한 이벤트에 의해 바뀌는 URL은 클라이언트상에서 처리가 되고 서버에 요청을 보내지 않습니다. 서버와는 오직 ajax를 이용해 데이터만 주고받을 뿐입니다.
즉, 최초 HTML을 요청하는 라우팅 처리는 서버에서 이루어지고 이후 라우팅 처리는 클라이언트에서 react-router에 의해 이루어집니다.
그런데 이미 HTML 파일을 받아 웹사이트에 접속된 상태에서 사용자가 필요한 URL을 주소창에 직접 입력하는 경우에는 어떻게 될까?
이 때에는 주소창에 직접 입력한 것이기 때문에 react-router가 처리하는 것이 아니라 서버에 요청을 보내게 됩니다. 따라서 서버 측에서 준비된 router에 의해 처리를 받습니다.
즉, 직접 수정한 URL로 최초 HTML을 요청하는 라우팅 처리는 서버에서 이루어지고 이후 라우팅 처리는 클라이언트에서 react-router에 의해 이루어집니다.
서버에 요청이 들어오면 express의 router를 이용해 동일한 HTML 파일을 보내주면 됩니다.