[React] Routing (1) 개념, SPA & CSR

 

Routing에 대해서 알아보자!

 

 

---

 

 

 Routing 

 

 

Router

[위키백과]
어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 

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

 

Routing

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

 

Page Routing

어떤 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 과정을 일컫는 말
즉, 요청에 명시돼있는 경로에 따라서 알맞은 페이지를 선택하게 하는 과정 자체

 

 

 

 

 

---

 

 

 MPA (Multi Page Application) 와 SPA (Single Page Application)

 

home이라는 경로를 가지고 도착한 요청에는 해당 경로에 알맞는 html 파일을 보내주는 식으로 웹서버가 동작하게 되는데, 

이렇게 여러개의 페이지를 준비해놨다가 요청이 들어오면 경로에 따라 적절한 페이지를 보내주는 방식을 MPA (Multipage Application) 방식이라고 한다.

Multipage Application들은 페이지가 이동하게 될때마다 새로운 페이지를 웹서버에 요청하고, 응답을 받으면 브라우저가 마치 새로고침 되듯이 깜박이면서 페이지 이동을 한다.

 

그런데 리액트는 SPA(Single Page Application) 방식이다.

즉, 페이지가 한개밖에 없는 간단한 어플리케이션이다.

페이지 이동하고싶어서 웹서버에 새로운 페이지를 요청해도 페이지를 하나밖에 못주고,  그러기에 페이지 이동할때마다 새로고침이 안된다.

리액트로 제작된 웹사이트를 요청하게 되면, SPA이기 때문에 어떤 요청을 하든 똑같은 index.html을 우선 보내주고, 리액트 앱을 통째로 던져준다.

이 상태에서 다른 페이지로 이동하고싶어서 어떤 버튼을 클릭하면, 리액트앱이 알아서 페이지를 업데이트 시켜버린다.

서버와 통신하는게 아니라 브라우저가 혼자 알아서 처리하는 것이다.

이런 방식으로 페이지를 이동하면 서버 대기 시간이 없으니 페이지 이동 자체가 굉장히 빨라진다.

어떤 웹사이트들은 접속할때마다 보이는 데이터가 각각 달라지는데, 이렇게 데이터가 필요한 경우에는 서버와 데이터만 요청하고 전달 받게 된다.

참고로, SPA에서 클라이언트 측에서 알아서 페이지를 렌더링 하는 방식을  CSR (Client Side Rendering)이라고 부른다. 

결론적으로 리액트는 SPA방식을 따르면서 CSR으로 페이지를 렌더링한다고 정리할 수 있겠다.

 

 

 

 

Routing 설치 및 사용방법은 아래의 두 게시글을 참고해주세요!

 

https://dev-ini.tistory.com/82

[React] Routing (2) Router 설치 및 사용방법 완벽 정리

 

 

https://dev-ini.tistory.com/84

[React] Routing (3) Path Variable(useParams), Query String(useSearchParams), Page Moving(useNavigate)