[React] 리액트 페이지 라우팅 SPA와 CSR

 

---

Page Routing

Router
-데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가

Route + ing
-경로를 정해주는 행위자체와 그런 과정들을 다 포함하며 일컫는 말

 

인테넛을 사용해서 웹사이트에 접속한다는 것은 브라우저를 통해서 웹서버에게 경로 요청을 날리고 문서를 받아보는 것이다

우리가 /home이라는 경로 요청을 보내면

home에 해당하는 웹문서은 Home.html 파일을 웹서버가 브라우저에게 보내게 된다

 

MPA

Multipage Application

이렇게 여러 개의 페이지를 준비해뒀다가 요청에 맞는 페이지를 보내주는 게 MPA방식이다

각각의 페이지 이동마다 페이지를 요청하는 방식을 사용하게 된다 그래서 MPA방식 들은 페이지를 이동할 때마다

새로운 페이지를 웹서버에 요청하고 응답을 받으면 브라우저가 마치 새로고침된 거처럼 깜박이면서 페이지 이동을 하게 된다

 

하지만 우리가 사용하는 React는 MPA 방식이 아니다

 

SPA

singlepage Application

바로 페이지가 하나밖에 없는 SPA 방식이다

페이지가 하나밖에 없다 해서 페이지 전환이 안되는 것은 아니다 리액트만의 방식으로 페이지 전환을 한다

 

리액트는 서버 관련 없이 알아서 페이지를 업데이트시킨다. 원래는 페이지 이동이 서버와 통신을 해야 하는데 

브라우저가 알아서 업데이트를 하니 서버대기시간이 줄어들고 페이지전환이 빠른 속도로 이루어지게 된다

 

만약 보이는 데이터들이 페이지마다 다를 땐 서버에서 딱 그 데이터만 요청해서 사용한다

MPA는 html문서부터 데이터까지 다 조립해서 받아야 했다면 SPA는 일단 웹페이지를 먼저 업데이트해 두고

데이터가 들어오면 그때 넣어주기 때문에 빠른 페이지 이동이 가능하다 이것을 Client side Rendering CSR이라 한다

즉 React는 SPA 방식을 따르면서 CSR 방식으로 페이지를 렌더링 한다

 

---