Routing이란?
Routing이란 인터넷 브라우저 등 프론트엔드가 담당하는 client-side에서 해당 경로의 주소로 접속할 때 서버로 부터 주소에 해당하는 HTML파일을 불러오는 것을 말한다.
쇼핑 사이트를 예로 들면, 우리는 모든 컨텐츠를 한 눈에 볼 수 있는 메인 페이지에서 구매하고 싶은 상품을 클릭할 것이다. 이 때, 상품 페이지는 메인 페이지의 다른 하위 경로에 속하며, 다른 정보를 담고 있다.
기존 방식의 Routing
기존 방식의 웹페이지는 Multi-Page 방식이었다. 다른 경로에 접속한다는 것은 해당 경로의 다른 HTML파일을 서버에서 일일이 요청하는 것을 말한다.
이러한 방식의 Routing은 일정 수준 이하의 정보를 담은 사이트에서는 크게 한계가 없을 수 있다. 하지만, 현대의 웹페이지는 방대한 정보를 가지고 있기 때문에 기존의 Multi-Page Routing은 많은 정보를 담는 웹페이지를 만드는 프로그래머에게 부담을 준다. 쿠팡과 같이 셀 수도 없는 상품과 서비스를 처리하기 위해 그 수만큼의 HTML파일을 관리하는 것은 비효율적이고, 상상만 해도 가혹하기때문이다.
또한, 유저가 다른 경로에 접속할 때마다 항상 새로운 HTML을 서버로부터 받아와야하기 때문에 백엔드로부터 매번, 요청과 반응이 필요하게 된다. 이 과정에서 페이지가 인터넷 상태에 따라 늦게 로드된다던지, 비슷한 정보를 매번 불러온다던지 하는 불편함을 낳는다.
이렇게 기존 Multi-Page Routing 방식은 날이갈 수록 한계가 생겼고, React와 같은 SPA(Single Page Application)가 트랜드로 떠오르면서 SPA에 맞는 Routing 방식이 개발되기 시작했다.
새로운 방식의 Routing
우리는 SPA을 지향하는 React를 사용하기 때문에 이러한 것을 깨면서까지 기존 방식을 고수하는 것은 이상해보인다. 그 대신에 React Router이라는 React의 라이브러리를 사용하여 SPA를 유지한 채로 Routing을 할 수 있다.
최초 유저가 웹 페이지에 접속했을 때 유저는 페이지의 대부분의 정보를 담은 HTML파일을 서버로부터 요청 및 전달 받는다. 이 HTML에는 각 경로에 대한 정보가 담겨져 있기 때문에 유저가 다른 경로에 접속하더라도 새로운 HTML파일을 서버로부터 전달받지 않아도 된다.
그렇다면 SPA이고, 매번 서버로 정보를 받아오는 것도 아닌데 어떻게 다른 경로로 접속이 가능할까? 이러한 것을 React Router가 담당한다. 어떠한 페이지로 접속할 때 React의 원하는 스크립트 블럭 등이 실행되게 해서 말이다.
