React element 랜더링 자세히 알아보기

모든 것은 trade-off 

리액트가 랜더링을 최적화하지만 알고리즘이 비효율적이거나 최적화되지 않았다면 오히려 더 안 좋을 수 있다. 

---

https://ko.reactjs.org/docs/rendering-elements.html

엘리먼트 렌더링 – React

 

React element는 불변 객체(immutable)이다 

불변 객체란?

- 변하지 않는 객체 

-  우리는 그저 React.DOM.render로 전달할 뿐 변경 판단 및 반영은 리액트가 한다. 

-  엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다 

 

---

https://ko.reactjs.org/docs/reconciliation.html

재조정 (Reconciliation) – React

비교 알고리즘 (Diffing Algorithm)

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

- 두 개의 트리란 바뀌기 전 후 두 가지를 뜻하며 이두가지를 비교할 때는 root부터 비교한다 

엘리먼트의 타입이 다른 경우

두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축합니다. <a>에서 <img>로, <Article>에서 <Comment>로, 혹은 <Button>에서 <div>로 바뀌는 것 모두 트리 전체를 재구축하는 경우입니다.

DOM 엘리먼트의 타입이 같은 경우

같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신합니다. 

- 타입이 같을 경우 이전 것들은 지우고 새로 그리지만 타입이 동일할 경우 속성들만 갱신된다. 즉 타입이 동일하다면 key를  먼저 비교한 후  props를 비교하여 값이 동일할 경우 유지 다를 경우 변경 

children = props

<button>{number}</button>
<button children={number}></button>

 

리액트는 DOM을 어떻게 비교하는가 ? 

- 가상돔(VirtualDOM)을 가지고 이전 가상 돔과 새로 들어온 가상 돔을 비교해서 재조정 알고리즘을 통해 업데이트한다 

- DOM을 계속 접근해서바꾸는것이 아니라  가상 돔(VirtualDOM)에 한 번 더 비교 후 반영하여 그려준다.