리액트의 페이지 라우팅
페이지 라우팅이란?
특정 페이지에 접속하고 싶은 사용자가 브라우저를 통해 웹 서버에게 어떤 주소로 페이지를 요청했을 때, 웹서버가 요청받은 주소에 따라 알맞은 페이지를 브라우저에게 반환해 줌으로써 사용자가 원하는 페이지가 브라우저에 잘 렌더링 되는 것까지의 과정을 말함
어떤 원리로 이뤄지는 건가?
전통적인 페이지 라우팅 방식
웹서버가 사용자에게 제공되어야 하는 모든 종류의 html 파일을 가지고 있는 상태이다.
이때 사용자가 브라우저를 이용해서 경로를 가지고 특정 주소를 갖는 어떤 페이지를 요청한다면, 웹서버는 요청에 알맞은 페이지를 찾거나, 실시간으로 제작을 해서 웹 브라우저에게 반환해 주는 방식으로 동작한다.
이후 브라우저가 웹 서버로부터 받은 html 파일을 화면에 렌더링 시켜주면서 페이지 라우팅이 종료된다.
웹서버가 사용자가 요청할 수 있는 여러 개의 html 페이지들을 가지고 있고, 요청이 들어왔을 때 주소에 맞는 html 파일을 찾아서 반환해 주는 방식으로 동작하는 웹 어플리케이션을 MPA(Multi Page Applicatioin)라고 부른다. 말 그대로 여러 개의 페이지를 가지고 있는 어플리케이션이라는 뜻이다.
MPA 방식에서 버튼이나 링크를 통해 다른 페이지로 이동하게 된다면?
브라우저는 이동하려는 주소의 페이지를 웹서버에게 또 요청한다. 웹서버는 또 실시간으로 적절한 html 파일을 찾거나, 제작해서 다시 반환해 준다.
브라우저가 원래 가지고 있던 페이지를 제거하고 새롭게 받은 페이지를 렌더링 시켜주면서 페이지 이동이 완료된다. 즉 원본을 전부 제거한 뒤 아예 새로운 html 파일로 페이지를 처음부터 다시 그려내는 비효율적인 방법이다. 이런 방식으로 동작하기에, 이 과정에서 페이지가 새로고침되는 것처럼 한 번 깜빡이게 된다.
또한 모든 사용자들이 페이지를 이동할 때마다 일일이 서버에게 페이지를 달라는 요청을 하고 기다려야 하기에, 동시에 많은 사용자가 이용할 경우 서버 부하가 점점 심해진다.
리액트는 MPA방식을 사용하지 않고 SPA방식을 사용한다.
SPA(Single Page Application)이란 하나의 페이지를 가지고 모든 페이지 라우팅을 처리하도록 동작하는 방식을 말한다.
웹서버가 모든 페이지에 해당하는 html 파일을 가지고 있는 것이 아닌, 단 하나의 index.html 파일만 가지고 있다. 또한 컴포넌트나 기타 기능을 직접 작성하는 js파일들도 함께 가지고 있다.
index.html은 아무런 내용도 없이 껍데기 역할만하는 빈 html파일이다. 그렇기에 사용자가 리액트앱에 처음 접속을 요청하게 되면 어떤 페이지를, 어떤 주소를 요청하던 상관없이 리액트 웹서버는 빈껍데기인 index.html을 보낸다.
브라우저는 빈 껍데기를 받았기에 화면 아무것도 나오지 않게 된다.
이후에 우리가 만들어놓은 js 파일들, 즉 리액트 컴포넌트들이나 다양한 기능들이 작성된 여러 개의 자바스크립트 파일들을 하나로 묶어서 브라우저에 추가로 보낸다.
*여러 개의 JS파일을 하나의 파일로 묶는 행위를 번들링이라고 하고, 이렇게 번들링 된 파일을 번들 파일이라고 한다. 이때 번들링을 수행하는 도구가 vite이다.
리액트 코드가 작성된 여러 개의 js파일들을 번들링 한 번들 파일을 바로 React App이라고 부를 수 있는 것이다.
브라우저는 서버로부터 받은 React App을 실행하게 된다.
React App이 브라우저에서 실행이 되면서 우리가 만든 컴포넌트들을 화면에 렌더링 하게 된다.
구체적으로 보면 main.jsx에 있는 render 메서드가 실행되면서 App 컴포넌트가 비로소 화면에 렌더링 된다.
만약 리액트에서 버튼이나 링크를 통해 다른 페이지로 이동하게 된다면?
SPA 방식으로 동작하는 리액트 앱은 페이지 이동시 서버에게 아무런 요청도 보낼 필요가 없다. 그저 브라우저가 스스로 페이지를 이동시키면 된다.
리액트 앱에 처음 접속했을 때 번들링된 js파일인 React App을 웹서버가 함께 전달한다고 했다. 이때 React App에는 컴포넌트 단위로 모든 페이지의 정보가 다 들어있는 것이다.
그래서 페이지를 이동할 때 리액트 앱을 통해 자체적으로 이동할 페이지의 컴포넌트로 화면을 교체할 수 있는 것이고, 이에 따라 서버에게 별도의 요청을 할 필요 없이 스스로 페이지를 이동하게 된다.
즉 페이지 이동시 변화가 필요한 컴포넌트만 새로운 컴포넌트로 갈아 끼우면 되기 때문에, 아주 신속하게 업데이트할 수 있게 된다.
MPA 앱의 페이지 이동 : 전체 페이지 다시 렌더링
SPA 앱의 페이지 이동 : 컴포넌트만 교체
CSR
SPA에서 빈 껍데기뿐인 index.html 안에 다양한 요소들을 그리기 위해, 브라우저에서 js를 이용하여 페이지를 그려내는 방식을 CSR(Client Side Rendering)라고 부른다.
CSR으로 작동하는 리액트 앱에서는 페이지를 아무리 많이 이동해 봤자 서버에게는 아무런 요청을 보내지 않고, 전체 페이지를 다 교체하는 것도 아니기에 매우 빠르게 페이지가 이동된다. 또한 어떤 깜빡임이나, 새로고침 또한 발생하지도 않는다.