DOM을 건드리는 방식
- 직접 DOM을 건드리는 경우 DOM의 구조를 파악하고 있어야하며, 클래스명이나 태그명이 바뀌는 경우 다시 DOM을 변경해야한다.
리액트의 가상 DOM
- 가상 DOM이 있고, 실제 DOM과 비교하여 state가 변화되었는지 아닌지 확인하고 바뀐 부분만 실제 DOM에 반영한다.
해당 질문은 가상 DOM을 제대로 이해하고 있는지와 연관되므로 가상DOM에 대해서도 답변해주는 것이 좋을 것 같다.
가상DOM 이란?
- DOM을 직접 조작하는 방식에서 렌더링의 비효율적인 문제와 최적화 및 유지보수가 어려운 점을 해결하기 위해서 나온 기술이다.
- 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고, 변경사항이 모두 반영된 가상 돔을 만들어 한 번만 DOM 수정을 한다. (변경해야 할 부분만 변경 후 DOM트리에 업데이트)
(또는
DOM과 유사한 객체를 메모리에 구현하고 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고 DOM과 비교해서 다른 점들만 DOM에 반영한다.) - 결과적으로 브라우저는 한번만 렌더링을 할 수 있게 된다. DOM에 접근하여 조작하는 대신 가상 DOM을 활용하여 불필요한 렌더링 횟수를 줄일 수 있다. 또한 더 반응성이 빠른 웹을 구현할 수 있다.
왜 등장했는가?
- DOM 조작에 의한 렌더링이 비효율적인 문제를 해결하기 위해
- SPA 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 어려워지는 문제 해결하기 위해
+ DOM(Document Object Model)이란?
- ‘문서 객체 모델’로, 텍스트 파일로 만들어진 웹문서의 요소를 각각의 객체로 만들고 트리 구조로 구성한 것이 DOM이다. 브라우저의 렌더링 엔진이 웹 문서를 로드한 후 파싱하여 브라우저가 이해할 수 있는 위와같은 구조로 메모리에 적재한다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.
