Virtual Dom 2

(React) Virtual DOM과 Reconciliation: React의 렌더링 최적화 원리

서론React 코드를 작성하면서 항상 궁금했음 "React가 뭐가 그렇게 빠르지? 매번 다시 렌더링하는데?" 찾아보니 Virtual DOM이라는 게 있고, Reconciliation이라는 과정이 있더라 "실제 DOM을 직접 건드리지 말고, 가상의 DOM에서 비교한 다음에 필요한 것만 업데이트한다"는 거 같았음 그래서 Virtual DOM이 뭐고, Reconciliation이 뭐고, 어떻게 빠르게 하는지 정리해봄본론DOM이 뭐냐?먼저 DOM(Document Object Model)을 이해해야 함 안녕하세요 첫 번째 문단 이 HTML을 브라우저가 해석하면 이런 구조의 DOM 트리가 생김:Document └── html └── body └── d..

(React) 기본 구조 SPA

React란?React는 Facebook에서 만든 UI 라이브러리로, 사용자 인터페이스를 컴포넌트 기반으로 구축할 수 있게 도와줌!대부분의 React 프로젝트는 SPA(Single Page Application) 형태로 개발됨 SPA는 하나의 HTML 파일로 시작해서, 필요한 화면을 브라우저에서 JavaScript로 동적으로 렌더링하는 구조특징컴포넌트 기반: 화면을 작은 단위로 나눠 재사용 가능Virtual DOM: 효율적인 렌더링을 위한 가상 돔 구조CSR 방식 기본: 초기 로딩 이후 빠른 사용자 경험 제공SPA란?SPA(Single Page Application)는 말 그대로 하나의 HTML 페이지에서 모든 화면을 구성하는 웹 애플리케이션 구조특징최초에 서버에서 index.html 한 장만 내려받음이..