[6주차] 리액트숙련: 가상DOM (Virtual DOM)

DOM (Document Object Model)

웹페이지에서 페이지를 document, 컴포넌트들을 element 라고 하는데, DOM은 이 엘리먼트를 tree 형태로 표현한 것이다.

 

DOM TREE

 

TREE 요소 하나하나를 NODE 라고 부르며, 각 NODE에 접근과 제어를 할 수 있는 API 를 제공한다.

API : HTML 요소에 접근해서 수정할 수 있는 함수

 

 

가상 DOM (Virtual Document Object Model)'

가상DOM 은 실제 DOM과 구조가 완벽하게 동일한 복사본 형태이며, 객체형태로 메모리에 저장된다.

객체형태로 메모리에 저장되기때문에 실제 DOM 조작보다 빠르게 조작이 가능하다.

 

DOM 조작과정

1. 리액트에서는 두 가지의 가상 DOM 을 가지고 있다. state가 변경되면 두번째에 해당되는 가상 DOM을 만든다.

• 화면 갱신 되기 전의 구조가 담겨 있는 가상 DOM 객체
• 화면 갱신 후의 보여야 할 가상 DOM 객체

2. diffing

state가 변경되면 갱신 전/후의 DOM을 비교하여 변화된 엘리먼트를 파악한다

 

3. 재조정(reconciliation)

diffing 작업이 끝나면, 변경이 일어난 부분만 실제 DOM 에 적용시킨다. 이때, 변경부분 DOM 적용은 변경사항을 모두 모아 한번만 적용을 시킨다(Batch Update)