페이지 라우팅 0 - React SPA & CSR

* 프로젝트 완성 예시
데모사이트 링크 : https://emotion-diary-winterlood.web.app/

감정 일기장

 

/home -> /product?id=1

 

1. Page Routing
* Routing 이란?
위키백과 - 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정.
Router : 데이터의 경로를 실시간으로 지정해주는 네트워크 장치.
Route + ing : 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말(데이터가 갈길을 정해주는 일련의 모든 과정).

* Page Routing 이란?
어떤 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 과정들을 일컫는 말(요청에 명시된 경로에 따라서 알맞은 페이지를 선택하게 하는 과정 자체).

* MPA (Multipage Application) 방식
여러 개의 페이지를 준비했다가, 요청이 들어오면 경로에 따라 적절한 페이지를 보내주는 방식.
페이지 이동시 새로고침이 일어남.
페이지 이동시 html 문서부터 데이터까지 한꺼번에 조립해서 받아야 하기 때문에 오래걸린다.

* SPA (Single Page Application) 방식
단일 페이지로, 간단한 웹 어플리케이션이란 뜻이다.
페이지 이동시 새로고침이 일어나지 않음.
리액트는 SPA 방식이다.
리액트로 만든 홈페이지 접속시, 브라우저에 index.html 과 같은 하나의 화면을 먼저 보내주고 이후 React 앱을 통째로 던져준다. 페이지 이동시, 서버에게 요청보내지 않고 React 앱이 알아서 페이지를 업데이트 하여 index.html 에 적용한다. 컴포넌트가 교체되듯 빠른속도로 페이지가 변경된다. 데이터가 필요한 경우에만 서버에 데이터만 요청하고 전달받게 된다.
브라우저, 즉 클라이언트 측에서 직접 알아서 페이지를 렌더링하는 방식을 CSR (Client Side Rendering) 이라고 부른다.

React 는 단일 페이지로 구성되는 SPA 방식을 따르면서, Client Side Rendering 으로 페이지를 렌더링 한다.


참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런