리액트의 가상 DOM, React가 DOM 트리를 탐색하는 방법, key 값을 설정하는 이유

 

리액트에는 virtual DOM이라고 하는 가상의 DOM 객체가 있다. 

이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, 리액트는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM  객체에 접근하여 변화 전, 후를 비교하고 바뀐 부분만 적용할 수 있다. ????

 

(진짜) DOM이란?
Document Object Model = 브라우저가 트리 구조로 만든 객체 모델이다.

 

JS 같은 스크립팅 언어가 태그들에 접급해서 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다. 

 

DOM이 애플리케이션의 UI 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 되면 성능에 영향을 미치게 되고, DOM의 조작 속도가 느려진다. 

 

DOM이 변경되고 업데이트가 된다는 것은 브라우저의 렌더링 엔진이 리플로우하고 리페인팅한다는 것을 의미하는데, 레이아웃 및 페이트에 해당하는 재연산을 해야하기 때문에 속도가 그만큼 느려지게 된다. 

 

 

🤔 바뀐 부분만 비교해서 그 부분만 렌더링을 할 수는 없을까? 🤔

가상 DOM을 사용하자!

 

가상 DOM은 가상의 UI 요소를 메모리에 유지시키고, 그 유지시킨 가상의 UI 요소를 리액트DOM과 같은 라이브러리를 통해 실제 DOM과 동기화 시킨다. 

 

- 실제 DOM을 조작하는 것은 실제로 브라우저 화면에 그리기 때문에 느리지만, 가상 DOM을 조작하는 것은 브라우저 화면에 그리는 것이 아니기 때문에 속도가 빠르다. 

 

- 가상 DOM 전 후 차이를 비교해서 실제 DOM에 변경을 수행할 수 있는 최상의 방법을 계산하고, 부분적으로 리렌더링이 된다. 그리고 실제 DOM으로 한꺼번에 업데이트 된다. 

 

가상 DOM은 실제 DOM과 마찬가지로 HTML 문서 객체를 기반으로 한다. 

 

 

 

---

React가 DOM 트리를 탐색하는 방법 & key 값을 설정하는 이유

리액트는 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. (일종의 너비 우선 팀색 BFS)

 

- 태그가 달라지지 않았다면 최대한 렌더링을 하지 않는 방향으로 최소한의 변경 사항만 업데이트한다. 

- 부모 태그가 달라지면 이전 트리를 버리고 새로운 트리를 구축한다. 

 

- 위에서 아래로 순차적으로 비교하는데, 새로운 태그를 자식 엘리먼트의 처음에 삽입하면 리액트는 아예 새로운 노드로 인지하고 새롭게 렌더링을 해버린다. 

 

그래서 key 값을 설정한다!!

 

key를 통해서 변화된 엘리먼트를 쉽게 파악할 수 있다! key는 전역적으로 유일할 필요가 없고, 형제 엘리먼트 사이에서만 유일하면 된다. 

 

만약, 유니크한 값이 없다면 최후의 수단으로 배열의 인덱스를 key로 사용할 수 있다. 

하지만 배열이 다르게 정렬될 경우가 생기면, 배열의 인덱스를 key로 선택할 경우 리액트가 비효율적으로 동작하게 된다. => 배열이 달라져도 인덱스를 그대로 유지되기 때문이다. 

 

인덱스는 그대로지만, 요소가 바뀌면 리액트는 배열 전체가 바뀌었다고 받아들이고, 기존의 DOM 트리를 버리고, 새로운 DOM 트리를 구축해버린다. 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓