DOM부터 간단하게 알아보기
DOM은 Document Object Model의 줄임말로, 웹페이지의 HTML 구조를 객체처럼 표현한 것입니다.
- HTML 태그 하나하나를 요소(Element) 라고 부릅니다.
- 이 요소들을 트리 구조로 표현한 것이 DOM입니다.
- DOM을 이용하면 내용을 바꾸거나, 스타일을 조정하거나, 요소를 추가/삭제할 수 있습니다.
Virtual DOM 이란?
리액트의 가상 DOM은 실제 DOM의 가벼운 복사본입니다. 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있습니다.
- Virtual DOM은 직접 접근하거나 수정할 수는 없습니다.
- 대신 리액트가 내부적으로 화면 변경을 효율적으로 관리하는 데 사용합니다.
리액트는 Virtual DOM의 두 가지 버전을 관리합니다.
- 렌더링 이전의 가상 DOM
- 렌더링 이후의 가상 DOM
리액트는 이 두 버전을 Diffing(비교) 하여 어떤 요소가 바뀌었는지 찾습니다.
리액트는 Batch Update(일괄 업데이트) 를 수행함으로 실제 DOM에 한번에 적용합니다.
이러한 과정을 Reconciliation(재조정) 이라고 합니다.
결론
리액트는 Virtual DOM을 통해 실제 DOM 조작을 최적화하여 성능을 개선하고, 개발자가 더 직관적으로 UI를 관리할 수 있게 해줍니다.
