이 글은 제가 개인적으로 정리하고 이해한 내용을 바탕으로 작성한 것입니다 ☕️
Client Side Rendering
- 사용자가 웹사이트를 요청한다.
- 서버 또는 CDN이 HTML, CSS, JS 파일을 전달한다.
- 브라우저가 HTML을 다운로드하고 파싱하기 시작한다.
- HTML 문서에 연결된 JS 파일을 다운로드한다. (defer 속성에 따라 파싱 후 실행될 수 있음)
- JS 파일을 실행하면서 리액트 앱이 초기화된다. 이때 초기 로딩 화면(스피너 등)만 보인다.
- JS에서 API 호출을 통해 데이터를 요청한다.
- 서버가 데이터를 응답하면, 리액트 상태가 업데이트되고 화면이 다시 렌더링된다. 이때부터 사용자는 데이터를 볼 수 있고, 상호작용이 가능하다.
리액트 렌더링이 CSR과 브라우저 렌더링과 어떻게 연결되는지 알아보자
- 브라우저가 HTML을 파싱하다 <script> 태그를 만나면 리액트 앱의 로딩이 시작된다. (defer나 <body>에 있으면 HTML 파싱 후 실행됨)
- 이제 JS 파일이 실행된다. 예: main.js, index.js.
- index.js / main.js에서 ReactDOM.render(<App />가 실행되어, App 컴포넌트가 렌더링되고, 그 안에 자식 컴포넌트들도 함께 렌더링된다.
- 이 초기 상태를 담은 Virtual DOM이 메모리에 생성된다.
- 이전 DOM이 없기 때문에, Virtual DOM이 diffing 없이 reconciliation을 수행한다. 새로운 Virtual DOM을 실제 DOM에 반영한다.
- Virtual DOM이 실제 DOM에 반영된 후, 브라우저는 시각적으로 렌더링을 시작한다.
DOM Tree → CSSOM Tree → Rendering Tree -> Layout -> Painting - 최종적으로 화면에 렌더링된 내용을 표시한다.
'React.js' 카테고리의 다른 글
| useEffect vs useLayoutEffect (0) | 2025.02.11 |
|---|---|
| Functional component lifecycle (0) | 2025.02.05 |
| Redux (1) | 2025.01.25 |
| Virtual DOM (1) | 2025.01.22 |
| What is React (1) | 2025.01.21 |