DOM 앞서 브라우저의 렌더링 과정을 통해서 Repaint와 Reflow가 브라우저 렌더링 중 리소스를 가장 많이 잡아먹는 연산이라고 배웠다. 일반적인 소개 페이지와 같은 정적인 웹 애플리케이션이라면 DOM이 더 좋은 성능을 나타낸다. 하지만 문제는 복잡한 SPA에서는 DOM 조작이 많이 발생한다는 것이다. Repaint와 Reflow가 빈번하게 발생하는 웹사이트에서는 UI/UX 렌더링에 비교적 많은 리소스를 잡아먹기 때문에 전체적인 프로세스를 비효율적으로 만든다. Virtual DOM Virtual DOM은 Reflow와 Repaint를 줄여서 브라우저 레이아웃 엔진의 성능에 최적화를 시켜준다. 이게 어떻게 가능할까? 먼저 브라우저에 렌더링을 한 후에 Virtual DOM을 하나 만듭니다. 그리고 변화..

이전에 브라우저의 렌더링이 어떤 방식으로 이루어지는 지 알아봤다 이번에는 React에서의 렌더링을 알아보자! 클래스 컴포넌트에서의 LifeCycle에 대한 이미지를 가지고 왔다. ComponentDidUpdate, DidMount 등등은 우리가 많이 알고 있는 익숙한 것들이다. 하지만 옆에 Render Phase, Commit Phase에 대해서는 특별하게 들어본 적이 없다. React에서의 Render Phase와 Commit Phase가 무엇인지 알아보자 Render Phase 간단하게 말하자면 컴포넌트 함수를 호출해서 React의 Element를 반환하고 새로운 Virtual DOM을 만들어준다. 그리고 최초 렌더링이 아니라면 재조정을 통해서 실제 DOM에서 적용할 변경점을 확인한다. 재조정 ( R..

1. DOM DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 2. Virtual DOM이 나온 이유 만약 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 1. 메모리 누수와 속도 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 각 단계마다 페이지의 모든 document를 훑으며 ..