CSR

React가 브라우저에서 어떻게 동작하는지에 대해서...

CSR이란?

웹 애플리케이션에서 사용자 인터페이스(UI)를 브라우저에서 렌더링하는 방식입니다. 
CSR에서는 서버에서 전체 페이지를 생성하는 것이 아니라, 
초기 HTML과 CSS 파일을 제공한 후 JavaScript를 사용하여 브라우저에서 동적으로 UI를 업데이트합니다.

프로젝트 시작을 하면, 처음에 localhost라는 파일이 다운로드 된다.
이것이 우리가 보고 있는 html page다. (관리자도구 -> network 에서 확인 할 수 있다.)

head 부분에는 'seo'와 관련된 정보들을 담고 있다.

body부분에 div id = "root" 라는 div 태그 하나만 있는걸 볼 수 있다.
그러면 아무것도 없는데 우리가 흔히 아는, 동적인 화면들은 어떻게 일어날까?

bundle.js라는 파일때문에 가능하다.

webpack이 우리 코드들을 bundle.js처럼 압축해서 보여준다.

bundle.js에는 react에서 실행될 수 있는 모든 코드들이 들어있다.
압축되어있는 상태이기 때문에 가독성이 떨어지고, 예전 js버전까지 지원해야하기 떄문에 js가 예전버전으로 변환되어있다.

사용자가 html파일을 받았을 때 view source page를 보면, html안에는 텅텅비어있다. 어떤 UI도 없다. 하지만 div root라는 것만 있다.

브라우저에 전송된 file 은 public => index.html파일임.

우리가 동적으로 만드는 파일은 src에 있다.
index.js에 시작 포인트.

실제로 root에 첫번째로 rendering 되는것은 App이라는 Component이다.
root라는거에 가상의 DOM을 만들고 id가 root라는것을 찾아서 const root의 가상요소에 넣어준다. App이라는 컴포넌트에 연결한다.

CSR의 장점

	CSR의 장점은 서버 부하가 감소하고, 애플리케이션의 성능이 향상됩니다.
    또한, CSR은 애플리케이션의 사용자 경험을 향상시키는데 도움이 됩니다. 
    예를 들어, 사용자가 페이지를 요청할 때마다 서버로부터 새로운 HTML을 받아와 화면 전환을 하지 않는 대신,
    CSR은 빠른 UI 업데이트를 통해 애플리케이션의 반응성을 높일 수 있습니다.

CSR의 단점

	하지만 CSR은 초기 로딩 속도가 느리고, SEO 최적화에 어려움을 겪을 수 있습니다. 
    따라서 CSR은 애플리케이션의 특성에 맞게 선택되어야 하며,
    CSR과 서버사이드렌더링(SSR)을 적절히 혼합하여 사용하는 것이 좋습니다.