React SPA & CSR
Routing ?
- 경로를 정해주는 행위 그 자체
브라우저와 웹 서버
- 인터넷을 사용해서 웹 사이트에 접속 한다는 것은 브라우저를 통해서 웹 서버에게 경로의 요청을 전달하고, 웹 문서를 받아보는 위와 같은 과정 입니다.
/home이라는 경로를 요청을 보내게 되면,/home에 해당하는 웹 문서인Home.html을 웹 서버가 브라우저에게 전달하게 됩니다.
Page Routing
어떠한 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 과정을 일컫는 말 입니다.
- 현재
REQUEST가/home이라는 경로로 요청이 들어왔습니다. - 웹 서버는 경로에 알맞는 페이지인
Home.html를 선별을 해서 돌려주게 됩니다. - 이렇게 요청에 명시되어 있는 경로에 따라서 알맞은 페이지를 선택하게 하는 과정 자체를Page Routing 이라고 부릅니다.
- 위와 같이 여러 개의 페이지를 준비해 놓았다가 요청이 들어오면 경로에 따라 적절한 페이지를 보내주는 방식을 MPA(Multipage Application) 라고 부릅니다.
MPA ( Multipage Application )
- MPA 는 페이지가 이동하게 될 때마다 새로운 페이지를 웹 서버에게 요청하고 응답을 받으면 브라우저가 마치 새로고침 되듯이 깜빡이면서 페이지 이동을 하게 됩니다.
- 페이지가 이동 할 때마다 페이지의 아이콘이 깜빡 입니다.
- 이렇게 브라우저가 웹 페이지에 대한 데이터를 받으면 새로 고침되면서 페이지를 이동시키는 방식을 MPA 의 특징이라고 볼 수 있습니다.
SPA ( Single Page Application )
- SPA 는 말 그래도 단일 페이지 어플리케이션 줄임말로,페이지가 하나 밖에 없는 간단한 웹 어플리케이션 이라는 뜻 입니다.
- 만약
마이페이지를 요청해도index.html를 반환하게 되고,상세 페이지를 요청해도index.html를 반환하게 됩니다. - 페이지 이동을 하고 싶어서 웹 서버에게 페이지를 요청해도 웹 서버도 전달할게 하나 밖에 없어서 다른 페이지를 줄 수가 없습니다.
React 로 개발된 웹 서비스들은 SPA 이기 때문에 페이지 이동을 정말 할 수 없을까 ??
- 만약 그랬다면 웹 개발에서 React 가 이정도로 많이 사용되지는 않았을 것 입니다.
- React도 자신만의 방식으로 여러 페이지를 이동 할 수 있게 구현할 수 있습니다.
React 의 방식
- React 로 제작된 웹 사이트를 요청하게 되면 SPA 이기 때문에 어떤 페이지를 요청을 하던 똑같인 html 페이지인
index.html를 우선 보내 줍니다. - 그 다음
React App을 통째로 던져 줍니다. - 만약 이 상황에서
Post라는 페이지로 이동하고 싶어서 어떠한 버튼을 클릭하면
- 서버에게
post를 달라하는게 아니고React App이 알아서 페이지를 업데이트 합니다.
- 페이지 이동이 원래는 서버와 통신을 하는 것이 일반적인데 브라우저가 알아서 혼자 처리하면 되니까, 서버 대기시간이 없을 뿐더러, 바로 페이지가 업데이트 됩니다.
접속 할 때마다 보이는 데이터가 달라지는 경우
- 데이터가 필요한 경우는 서버와 데이터만 요청하고 전달 받습니다.
CSR ( Client Side Rendering )
- SPA 에서 브라우저, 즉 클라이언트 측에서 알아서 페이지를 렌더링 하는 방식을
- 클라이언트 측이 직접 렌더링 한다고 해서 CSR 이라고 부릅니다.
정리
- React 는 단일 페이지로 구성되는 SPA 방식을 따르면서, CSR 로 페이지를 렌더링 합니다.
참고
Coding is playing!