가상돔이란(DOM)

DOM

(Document Object Model)

• Elements = html 하나하나의 요소
• Document = 이 모든 요소들을 담고 있는 웹페이지

 

브라우저는 이 페이지에 해당하는 html을 분석해서 화면에 멋지게 띄어준다.

DOM이란 이렇게 웹페이지에 들어있는 html element들을 트리형태구조로 표현한것.

 

가상돔 Virtual DOM

• 리액트는 가상돔을 사용하여 실제돔을 조작하는 일을 엄청나게 빠르게 해준다
• 가상돔 = 실제 돔과 같은 내용을 담고 있는 복사본 ( 이 복사본은 실제돔이 아닌 JS객체형태로 메모리안에 저장되어있다)
• 가상돔은 복사본이기 때문에 실제 돔안에 들어있는 모든 elements들과 속성들을 똑같이 가지고 있다
• (하지만 가상돔은 실제돔과는 다르게 브라우저안에 있는 문서에 직접적으로 접근할 수 없다→ 화면에 나오는 내용을 직접 수정 X)
• 굳이 복사본을 만드는 이유? → 리액트는 가상돔을 통해서 우리가 실제돔을 조작하는 속도를 획기적으로 줄여준다

DOM 조작

• 돔의 내용을 조작해줄때마다 브라우저화면의 UI를 변경하는것은 꽤나 복잡하고 시간이 걸린다 (비효율적)
• 가상돔은 항상 2개의 가상돔을 가지고 있다

• 가상돔생성: 리액트는 state가 변경될 때마다 화면이 새로 렌더링된다.
  렌더링이 발생될 상황일때마다 새로운 내용이 담길 가상돔을 생성한다 (실제 브라우저에 담기기전에)
• Difffing: 렌더링 이전에 화면내용을 가지고 있는 첫번째 가상돔과 업데이트 이후의 내용을 담고 있는 두번째 가상돔을 비교해서 정확히 어느 elements들이 변했는지 찾아낸다 (엄청효율적)
• 재조정(Reconsiliation): 딱 바뀐 부분만 찾아내서 실제 브라우저 화면에 적용
  • 재조정이 효율적인이유: Batch update
• Batch update(집단업데이트): 변경된 모든 element들을 한번에 동시에 적용시켜주는 것.

 

(만약 list안에 10개의 항목이 바뀌었다면 실제돔을 10번 반복해서 조작하는 것이 아니라, 한꺼번에 바뀐 모든 부분들을 집단으로 조작시켜준다. 돔조작에 있어서 가장 비용이 많이 드는 부분은 화면을 그려주는 작업.
Batch update는 변경된 부분을 하나하나 따로따로 그려주는 것이 아니라 변경된 내용을 한번에 다 받아와서 실제돔에 한꺼번에 적용 → 빠르고 효율적)

 

 

정리

---

1. 리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다.
2. 그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.
3. 리액트는 항상 두 개의 가상돔을 갖고 있다.
4. 첫번째 가상돔은 변경 이전의 내용을 담고 있고, 두번째 가상돔은 병경 이후에 보여질 내용을 담고 있다.
5. 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 element들이 바뀌었는지 효율적으로 비교하여 파악한다. 그리고 이러한 과정을 Diffing이라고 부른다.
6. Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로써 실제 DOM에 한번에 적용시켜준다.
   그리고 이러한 과정을 Reconsiliation, 재조정이라고 한다.

📚  벨로그에 직접 기록한 내용을 이전하였습니다 📚
참고자료: YOUTUBE 별코딩