[F-Lab] 기술문제 풀어보기

 

에프랩 지원서를 넣은 이후에 메일이 왔다.

풀어볼 만한 기술 문제라고 함께 적혀 있었는데, 프론트엔드 기술면접에 주로 출제되는 가상 돔의 내용이었다.

 

SPA 프레임워크를 사용하게 되면 가상 돔에 대한 이론을 접할 수 있다.

실제 돔에 반영하기 이전에 가상 돔에서 수정된 돔 트리를 비교해서 반영될 부분만 갱신한다라고만 간단하게 이해하고 있었다.

Reconciliation이라는 용어도 생소하여 이번에 학습해보게 되었다.

 

 

Virtual DOM(Virtual Document Object Model) 이란?

 

VDOM은 실제 DOM을 추상화한 개념으로, 실제 DOM을 직접 조작하는 것 대신에 VDOM을 조작하여 그것을 이용하여 실제 DOM을 갱신하는 기술이다.

React는 항상 두 개의 VDOM을 가지고 있다.

1번째 가상돔은 변경 이전의 내용을 담고 있고, 2번째 가상돔은 변경 이후에 보일 내용을 담고 있다.

변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 이러한 과정을 Diffing 이라고 부른다.

Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update 를 수행하여 실제 DOM에 한 번에 적용시킨다.

이러한 과정을 Reconsiliation(재조정) 이라고 한다.

 

 

Reconsiliation 과정

 

이전, 새로운 DOM의 자식 요소를 비교할 때, 태그 이름, 속성, 스타일, 이벤트 핸들러 등을 비교한다.

 

1. 새로운 VDOM과 이전 VDOM의 자식요소들을 순회한다.

2. 새로운 VDOM의 자식 요소와 이전 VDOM의 자식 요소가 동일한 경우, 이들을 재사용한다.

3. 새로운 VDOM의 자식 요소와 이전 VDOM의 자식 요소가 다른 경우, 새로운 VDOM의 자식 요소를 이전 VDOM의 자식 요소와 비교한다.

4. 새로운 VDOM의 자식 요소가 이전 VDOM의 자식 요소의 자식 요소를 가지고 있는 경우, 이들을 재사용한다.

5. 새로운 VDOM의 자식 요소가 이전 VDOM의 자식 요소의 자식 요소를 가지고 있지 않은 경우, 이전 VDOM의 자식 요소를 삭제하고 새로운 VDOM의 자식 요소를 추가한다.

위 과정을 순회하며 수행하면, 실제 DOM을 갱신할 수 있는 최소한 작업만을 수행할 수 있게 된다.

Reconciliation을 이용하면, 자주 변경되는 요소들을 최소한 작업만으로 갱신할 수 있기 때문에, 성능 측면에서 유리하다.

 

 

VDOM과 Reconsiliation에 대해서 알아보았다.

학습하면서 Diffing, Batch Update, Reconsiliation에 대해서 알 수 있었고, 조금 더 자세히 포스팅 조사해서 포스팅을 해보아야겠다.