[React] Virtual DOM과 리랜더링, 재조정

순수 자바스크립트의 경우 변경되면 Element 전체를 다시 그린다.

그러나 React의 경우 변경된 부분만 다시 그리기 때문에 더 효율적으로 리랜더링 하는 것을 볼 수 있다!

바닐라 JS

React

 

📌 Virtaul DOM 

UI의 가상적인 표현을 메모리에 저장하고 ReactDOM 라이브러리에 의해 실제 DOM과 동기화하는 것이다.

가상의 돔 트리를 사용해서, 이전 상태와 이후 상태를 비교하여, 바뀐 부분을 찾아내 자동으로 바꿔준다!

 

개발은 항상 모든 것이 trade-off다. 즉, 하나가 좋으면 하나를 잃게 된다.

위의 결과를 보면 React가 무조건 정답같고 JavaScript는 쓰면 안 될 것 같지만, 정답이 아니다.

 

React 엘리먼트는 불변객체이다.

 

불변 객체? 변하지 않는 객체(immutable)

우리는 그저 ReactDOM.render(element, rootEelment); 로 전달할 뿐 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 변경 판단 및 반영은 리액트가 알아서 한다.

엘리먼트 렌더링 – React

 

📌 리액트의 비교, 재조정 (Reconciliation)

가상의 표현(Virtual dom)을 메모리에 저장하고 실제 DOM과 동기화하는 과정을 재조정이라고 한다.

 

엘리먼트의 타입이 다르면? 이전 엘리먼트는 버리고 새로 그린다.

엘리먼트의 타입이 같으면? (key를 먼저 비교하고) props를 비교해서 변경사항을 반영한다.

 

루트부터 비교

트리를 파괴 -> 부모가 바뀌었다면 트리를 버린다.

Keys -> 자식 재귀 처리 시 효율성 확보

 

이전 Virtual dom과 새로 들어온 Virtual dom을 서로 비교하여 재조정 알고리즘을 통해서 업데이트한다.

계속 dom에 접근해서 바꾸는 것이 아닌 Virtual dom에 한번 더 비교하여 반영한다.

엘리먼트의 타입이 같아서 props만 비교하여 변경사항 반영하는 중!

재조정 (Reconciliation) – React