🌀 리액트
사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리
- 컴포넌트를 기반으로 UI를 표현
- 화면 업데이트 구현이 쉬움
- 화면 업데이트가 빠르게 처리
🌀 가상 DOM
특히 리액트의 핵심 개념들 중에서 가상 DOM (Virtual DOM)에 대해 알아봅시다.
리액트는 이 가상 DOM을 이용해서 화면 업데이트를 빠르게 처리할 수 있습니다.
🫧 브라우저의 렌더링 과정
가상 DOM에 대해 알아보기 전에 브라우저의 렌더링 과정을 먼저 알아야합니다.
- HTML과 CSS 코드를 브라우저가 이해하기 쉽게 DOM, CSSOM로 변환합니다.
- DOM과 CSSOM을 합쳐 Render Tree를 만듭니다.
- 요소의 배치를 잡는 작업인 Layout 과정을 거칩니다.
- 요소들을 실제로 화면에 그려내는 Painting 과정을 거칩니다.
🫧 브라우저의 업데이트 과정
그렇다면, 브라우저의 업데이트는 어떻게 일어나게 될까요
JS가 DOM을 수정하면 업데이트가 발생합니다.
DOM이 수정되면 브라우저는 렌더링 과정을 다시 실행합니다. Render Tree를 다시 생성하고 Layout을 다시 잡고, Painting을 다시 진행하여 화면에 다시 렌더링되어 업데이트가 이루어집니다.
그런데 Layout을 다시하는
Reflow와 Painting을 다시하는Repaint는 매우 오래걸리는 과정 !
⮕ 성능이 굉장히 악화되게 됌능이 굉장히 악화되게 됌
그래서 JS로 직접 DOM을 조작해서 업데이트를 최소화해야할 때는,
동시에 발생한 업데이트를 어딘가(변수 등..)에 모아두었다가 한 번에 DOM을 수정해야 성능을 개선할 수 있습니다.
하지만, 이러한 방식은 서비스의 규모가 커질 수록 관리하기 힘들어짐
하지만 리액트는 이 과정을 알아서 자동으로 처리해줍니다.
🫧 Virtual DOM
리액트는 동시에 발생한 업데이트들을 모아서 한 번에 수정하게끔 자동으로 처리해줍니다.
어떻게 가능할 수 있을까요?
리액트는 가상 DOM을 사용합니다.
가상 DOM은 실제 DOM의 가벼운 복사본으로, 리액트가 UI의 변화를 효율적으로 처리하기 위해 사용합니다.
업데이트가 일어나면 실제 DOM을 바로 수정하는게 아니라 가상 DOM을 먼저 수정합니다.
그래서 동시에 발생한 업데이트들이 다 모였으면 DOM에 한 번에 반영하여 실제 DOM을 1회 수정합니다.
그래서 리액트는 가상 DOM을 사용하여 이러한 비용을 최소화홥니다.
1. 컴포넌트의 상태가 변경되면, 리액트는 새로운 가상 DOM 트리를 생성합니다.
2. 새로운 가상 DOM 트리와 이전 가상 DOM 트리를 비교하여 실제로 변경된 부분을 파악합니다.
3. 변경이 필요한 부분을 파악한 후, 실제 DOM을 필요한 부분만 업데이트합니다.
⮕ 이 과정이 변경되는 모든 요소들을 집단화하여 한 번에 실제 DOM에 적용하는 방식; 리액트는 가능한 한 최소한의 DOM 조작으로 변경사항을 반영하여 UI 업데이트를 효율적으로 수행합니다.
🌀 결론
정리하자면, 리액트의 가상 DOM으로 통해 필요한 부분만을 업데이트하여 실제 DOM 조작을 최소화함으로서 리액트 애플리케이션의 렌더링 성능을 향상시킵니다.
가상 DOM은 리액트의 다양한 최적화 기술과 함께 작동하여, 대규모 애플리케이션에서도 뛰어난 성능을 제공합니다.
출처
한입 크기로 잘라먹는 리액트 강의
Virtual DOM(React) 핵심정리
리액트의 가상 DOM 이해하기
