[React] React에서 DOM 렌더링 하는 방법

요약

실제로 DOM을 변경하지 않고 Virtual DOM을 사용한다

Virtual DOM에서 변경사항을 반영하고 실제 DOM과 비교하여 바뀐 부분을 모아 DOM에 전달하여 단 한번의 리렌더링만 일어나도록 한다 (Batch Upadate)

이러한 프로세스를 Reconciliation이라고 한다

💡 DOM이란?

DOM은 document object model의 약자로 HTML, XML과 같은 문서구조를 프로그래밍 언어로 연결해주는 api이다. 트리구조로 표현된다

렌더링 과정

1. 업데이트한 전체 UI를 Virtual DOM에 적용한다
2. 실제 DOM과 생성된 Virtual DOM을 Diffing Algorithm을 이용해 비교한다
3. ReactDOM.render()가 React element를 container DOM에 렌더링할 때 필요한 부분만 변경한다.

Diffing Algorithm

두 개의 트리를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교한다. 이후의 동작은 루트 엘리먼트의 타입에 따라 달라진다****

엘리먼트 타입이 다른경우

React는 이전 트리를 버리고 완전히 새로운 트리를 구축한다 ex) <a>에서 <img>로 변경

• 트리를 버릴 때 이전 DOM 노드들은 모두 파괴되며 컴포넌트 인스턴스는 componentWillUnmount()가 실행된다.
• 새로운 트리가 만들어질 때, 새로운 DOM 노드들이 DOM에 삽입된다.
• 그에 따라 컴포넌트 인스턴스는componentDidMount()가 실행된다.
• 이전 트리와 연관된 모든 state는 사라진다

엘리먼트 타입이 같은경우

두 엘리먼트의 속성을 확인해 변경된 부분만 수정한다.

DOM 노드 처리가 끝나면 해당 노드자식을 재귀적으로 처리한다

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li> //새로 추가된 요소
</ul>

React는 동시에 두 리스트를 순회하며 차이점이 있으면 변경을 생성한다

React는 두 트리에서 <li>first</li>가 일치하는 것을 확인하고, <li>second</li>
가 일치하는 것을 확인한다. 그리고 마지막으로 <li>third</li>를 트리에 추가한다.

❗️단, 리스트의 맨 앞에 엘리먼트를 추가하는 경우 성능이 좋지 않기때문에 지양해야한다

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li> // 새로 추가된 요소
  <li>Duke</li>
  <li>Villanova</li>
</ul>

React는 <li>Duke</li>와 <li>Villanova</li> 종속 트리를 그대로 유지하는 대신 모든 자식을 변경한다

이를 해결하기 위한 방법은 key값을 부여하는것이다. 관련 내용은 아래 포스팅에 정리해 놓았다.

https://hae-ong.tistory.com/100

[React] React key 사용 이유