1. Routing이란?
어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정
출처 : 위키백과
친구에게 카카오톡을 보내는 행위는 어떻게 보면 데이터를 전송하는 과정이다.
무전기가 아니라면 보내는 사람의 핸드폰에서 받는 사람의 핸드폰으로 데이터가 직통으로 전송되지는 않는다.
만약 직통으로 데이터가 전송되는 구조였다면 서울에서 보낸 메시지는 부산까지 가는데 10분이 소요될 것이다.
우리가 지하철을 타고 어디론가 가는 것처럼 데이터도 네트워크 장치들을 거쳐서 이동하게 된다.
데이터는 인간이 아니기 때문에 어디에서 내려 어디로 가야겠다고 스스로 판단할 능력이 없다.
그래서 네트워크 장치들이 자신한테 도착한 데이터들이 실시간으로 어디로 가야되는지 갈 길을 알려주게 된다.
네비게이션이 막히는 길을 피해 가장 빠른 길을 안내하듯이 네트워크 장치도 가장 빠르게 데이터가 갈 수 있는 길을 실시간으로 알려준다.
데이터의 경로(Route) 역할을 하는 네트워크 장치를 우리는 라우터(Router)라고 부른다.
ROUTER
데이터의 경로를 실시간으로 지정해주는 길잡이 역할을 하는 무언가
ROUTE + ING
경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말
그러므로 친구에게 메시지를 보낼때 여러 경로를 거쳐서 이루어진 과정을 모두 라우팅(routing)이라고 할 수 있다.
2. Page Routing이란?
우리가 인터넷을 이용해 웹 사이트에 접속한다는 것은 브라우저를 통해 웹 서버에게 경로의 요청을 날리고 웹 문서를 받아보는 과정이다.
/hmoe이라는 경로로 요청을 보내게 되면 /home에 해당하는 웹 문서인 Home.html을 웹 서버가 브라우저에게 보내주게 되기 때문에 우리가 home이라는 이름을 가진 웹 페이지에 접속할 수 있게 된다.
만약에 여기서 mypage로 이동하고 싶다면 /mypage로 요청을 보내고 웹 서버는 Mypage.html 웹 문서를 반환해서 mypage에 접속하게 된다.
페이지 라우팅(Page Routing)
요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 그 페이지에 접속하는 그 과정 자체를 페이지 라우팅이라 부른다.
여러 개의 페이지를 준비해놨다가 요청에 들어오면 경로에 따라 적절한 페이지를 보내주는 방식을 MPA(Multipage Application) 라고 한다.
보통 웹 사이트들은 이렇게 여러 개의 페이지를 가지고 있다.
쇼핑몰의 경우에도 index 페이지, 상품 리스트 페이지, 정보 페이지, 로그인 페이지 등등 엄청나게 많은 페이지를 가지고 있다.
웹 사이트를 개발할 때, 전통적으로는 위의 페이지 이동 방식처럼 각각의 페이지 이동마다 페이지를 요청하는 방식을 사용하게 된다.
MPA들은 페이지가 이동하게 될 때마다 새로운 페이지를 웹 서버에게 요청하고 응답을 받으면 브라우저가 마치 새로고침 되듯이 깜빡이면서 페이지 이동을 하게 된다.
3. SPA(Single Page Application)
반면 React는 멀티 페이지 방식이 아닌 SPA(Single Page Application) 방식을 따르게 된다.
SPA
페이지가 하나뿐인 간단한 웹 어플리케이션
마이페이지, 상세페이지 등 여러 페이지를 요청해도index.html을 똑같이 반환한다.
만약 우리가 다른 페이지로 이동하고 싶어서 요청해도 페이지가 하나밖에 없기 때문에 다른 페이지를 줄 수 없다.
React로 만든 웹 사이트를 요청하게 되면 SPA이기 때문에 index.html을 우선 보내주고, 그 다음 React App을 통째로 주게 된다.
이 상태에서 Post라는 페이지로 이동하고 싶어서 어떤 버튼을 클릭할 경우, 서버에게 Post페이지를 달라고 요청하는 것이 아닌 React App이 알아서 페이지를 업데이트 시킨다.
원래 페이지 이동은 서버와 통신을 해 이루어져야 하는데 브라우저가 알아서 처리하면 되므로 서버 대기 시간이 필요 없고 그냥 페이지가 업데이트 되는 것이다.
컴포넌트가 변경되듯 빠른 속도로 페이지가 변경된다. 이렇게 되면 페이지를 이동할 때마다 서버와 통신하며 대기하는 시간 자체가 없어지게 되어 페이지 전환이 굉장히 빨라진다.
그런데 어떤 사이트들은 접속할 때마다 보이는 정보들이 각각 달라진다.
이렇게 데이터가 필요한 경우에는 서버와 딱 데이터만 요청하고 전달받게 된다.
MPA 방식은 html문서부터 데이터까지 다 한꺼번에 조립해서 받아야 해서 오래걸렸는데 SPA 방식을 사용한 페이지 이동은 일단 웹 페이지 먼저 바꾸고, 지금 데이터가 없다면 로딩을 잠깐 띄어놓고, 데이터가 들어오면 그 때 데이터를 보여주면 되기 때문에 굉장히 빠른 페이지 이동을 가지게 된다.
SPA에서 브라우저, 즉 클라이언트 측에서 알아서 페이지를 렌더링 하는 방식을 CSR(Client Side Rendering) 이라 한다.
