리액트를 공부하면서 가상돔의 개념은 매우 자주 볼 수 있는데, 오늘은 이 가상돔에 대해 자세히 이해해보려고 한다.
1. 돔 (Document Object Model)
DOM이란 HTML element들을 Tree 형태로 표현한 것인데 DOM Tree 안에는 각각 element에 상응하는 Node 들어가 있다.
API를 통해 DOM 구조에 접근을 하고, 원하는 element를 조작할 수 있는 것이다. 이를 DOM 조작이라 한다.
getElementById, querySelector와 같은 API를 통 DOM 구조 안의 element에 접근해 원하는대로 내용, 스타일 등을 수정하는 것이다.
2. 가상 돔 (Virtual DOM)
가상 돔은 쉽게 말해 실제 DOM과 같은 내용을 담고 있는 복사본으로, 실제 DOM의 모든 element와 속성을 공유한다. 실제 DOM 과의 차이점은 브라우저에 있는 문서에 직접적으로 접근할 수 없다는 점인데, 화면에 보여지는 내용을 직접 수정할 수 없다는 것이다.
리액트에서 가상 돔을 사용하는 이유는 실제 DOM을 조작하는 것보다 시간을 줄여주고, 코드량 또한 줄여주기 때문이다.
3. 리액트에서의 가상 돔 (Virtual DOM)
리액트는 항상 두개의 가상 돔 객체를 가지고 있다.
- 렌더링 이전 화면의 구조를 나타내는 가상 돔
- 렌더링 이후 보이게 될 화면 구조를 나타내는 가상
리액트는 상태가 변경될 때마 Re-Rendering이 발생하는데, 이 시점마다 실제 브라우저가 그려지기 전에 새로운 내용이 담긴 가상 돔을 생성하게 된다.
💡Diffing : 렌더링 이전에 화면의 내용을 담고 있는 첫번째 가상 돔과 / 업데이트 이후에 발생할 가상 돔을 비교해 어떤 element가 변했는지를 비교하는 것 => 이를 통해 차이가 발생한 부분만을 실제 DOM에 적용
💡 위와 같은 과정을 Reconciliation(재조정)이라고 하는데, 변경된 모든 element들을 집단화시켜 이를 한번에 실제 DOM에 적용하기 때문에 효율적이다.
=> DOM 조작에 비용이 가장 많이 발생하는 것은 렌더링인데 10개의 항목이 바뀌었다면 실제 DOM을 10번 반복해 수정하는 것이 아니라, 한 번에 집단화시켜 이를 적용해 렌더링하기 때문이다.
