TIL 231116 - DOM

목차

1. DOM

DOM(Document Object Model) : 말 그대로 다큐먼트를 표현하기 위한 수단이라고 보면 된다. 구조도를 트리 형태로 만든 것.

수 많은 컴포넌트로 구성된 사이트를 document(문서), 그 문서를 이루고 있는 수 많은 컴포넌트를 element라고 함.

트리 요소 하나 하나를 노드라고 함.

노드는 각각의 노드에 접근할 수 있게 해주는 API를 제공함.

API는 html 요소에 접근해서 수정할 수 있게 해주는 함수라고 보면 된다.

근데 리액트는 가상 돔, Virtual DOM을 사용함.
왜냐면, 실제 DOM을 사용하는 것보다 더 빠르게 UI를 수정하고 변경할 수 있기 때문.

사용방법은,
실제 DOM과 완벽하게 동일한 복사본 형태를 객체 상태로 메모리에 저장하여 사용한다.
이렇게 하면 훨씬 더 빠르게 사용이 가능하다.


1. 화면 갱신 전 구조가 담긴 가상 DOM 객체, 화면 갱신 후 보여야 할 가상 DOM객체를 만듦.

2. state가 변경되면 갱신 전, 후 구조를 담고 있는 가상 DOM을 각각 비교하여 변경점을 빠르게 분석함. -> diffiing

3. 변경 부분을 실제 DOM에 적용시켜줌. 그 작업을 reconciliation(재조정)이라 함.

그런데 리액트는 변경 사항이 생길 때 마다 한 건 한 건씩 변경해주는게 아님.
Batch Update를 한다고 했음. 모아모아 한 번 변경 적용해준다는거.
앞서서 hook들 설명할 때 다뤘던 개념임.