DOM(Document Object Model)
객체로 문서 구조를 표현하는 방법(XML, HTML 등으로 작성)
Virtual DOM
리액트의 성능을 향상시키기 위해 고안된 개념
메모리 상에 존재하는 가상의 DOM
브라우저 상에 실제 DOM을 직접 조작하는 것보다 더욱 빠르게 렌더링 가능
Virtual DOM은 실제 DOM과 비슷한 구조를 가지고 있으며, 리액트의 컴포넌트가 렌더링될 때마다 Virtual DOM을 업데이트합니다. 이때, Virtual DOM을 업데이트하는 것은 실제 DOM을 조작하는 것보다 훨씬 빠르며, Virtual DOM을 업데이트할 때마다 리액트는 변경된 부분만 실제 DOM에 반영합니다.
Virtual DOM의 장점
- 효율적인 렌더링: Virtual DOM은 변경된 부분만 실제 DOM에 반영하므로, 렌더링 속도가 빨라집니다.
- 크로스 브라우저 호환성: Virtual DOM은 브라우저에 상관없이 동일한 방식으로 동작하므로, 크로스 브라우저 호환성이 뛰어납니다.
- 개발 용이성: Virtual DOM은 브라우저 상에서 렌더링되는 것이 아니기 때문에, 개발자는 브라우저를 열어 확인하지 않아도 됩니다. 또한, Virtual DOM은 순수한 JavaScript 객체이므로, 테스트 및 디버깅이 쉽습니다.
'Frontend > React' 카테고리의 다른 글
[React] 리액트 라우터 (0) | 2024.06.19 |
---|---|
[React] 리액트 라이프 사이클 (0) | 2024.02.05 |