[React] 클라이언트 사이드 렌더링(CSR)

클라이언트 사이드 렌더링은 서버에서 전체 페이지를 한 번 렌더링해서 보여주고 사용자가 요청할 때마다 리소스를  

서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식이다. (렌더링 - 서버로부터 HTML파일을 받아 브라우저에 뿌려주는 과정) 직접 확인을 해보자!

 

터미널에 yarn start를 입력하면 이런 페이지가 뜬다.

 

개발자 도구 -> network 탭에 들어간 후, 새로고침을 해보자.

 

 

그럼 위와 같은 파일들을 볼 수 있을텐데, 여기서 어떤 순서로 어떤 파일들이 다운로드 되어서 브라우저에 표기되는지 확인할 수 있다.

localhost 에서는 우리가 보고있는 페이지의 html 코드를 확인할 수 있다.

bundle.js 에서는 어플리케이션에 관한 코드, 즉 리액트 동작에 필요한 코드가 들어있다. 

react_devtools_backend.js 에서는 정적 이미지, 아이콘, json파일 등이 전송되는 모습을 볼 수 있다.

 

html 코드를 한 번 살펴보자.

body부분은 <div id="root"></div>를 제외하고 코드가 텅텅 비어있는 것을 볼 수 있다.

분명 웹페이지는 비어있지 않은데 어떻게 된 일일까? 그것은 바로 리액트가 클라이언트 사이드 렌더링이기 때문이다.

텅텅 빈 html 코드를 보내주고 리액트 코드가 브라우저에 전송을 하면서 클라이언트 사이드에서 우리의 코드가 동작하며

우리가 작성한 코드대로 필요한 DOM 요소를 동적으로 다이나믹하게 생성해준다.

 

이를 동적으로 만드는 코드는 src 폴더 안에 있다. index.js파일이 리액트의 시작포인트. 직접 확인해보자!

 

 

첫 줄을 보면 createRoot api를 이용하여 브라우저 상에서 id가 root인 요소를 찾아서 root라는 가상의 요소를 만들고 이 root에 App이라는 컴포넌트를 연결한다. 그러면 리액트가 내부적으로 App 컴포넌트에 들어와서 리턴되는 js 문법을 확인하고 브라우저에서 제공하는 create element라는 동적 DOM요소를 생성하는 api를 통해 코드에서 정해진 순서대로 해당되는 태그를 동적으로 만들어준다.

 

그 아래에는 StrictMode라는 것이 있는데 스트릭모드는 조금 더 엄격한 모드에서 개발을 하고 배포할 땐 이게 저절로 꺼진다. 개발할 땐 각종 경고를 받아볼 수 있어서 좀 더 strict한 코딩이 가능하다.