[React] 리액트는 어떻게 화면을 업데이트 하는가?

- 비교 알고리즘 (Diffing Algorithm)

ko.reactjs.org/docs/reconciliation.html#the-diffing-algorithm

2개의 트리를 비교할 때, 리액트틑 두 Element의 Root 엘리먼트부터 비교한다.

이후의 동작은 root Element의 타입에 따라 달라진다.

 

1. Element의 타입이 다른 경우

2개의 Root Element 타입이 다르면, 리액트는 이전 트리를 버리고, 완전히 새로운 트리를 구축한다.

트리를 버릴 때에는 이전 DOM 노드들을 모두 파괴되고,  컴포넌트 인스턴스에 componentWillUnmount()가 실행된다.

새로운 트리가 만들어 질 때에는 새로운 DOM노드들이 삽입되고 해당 컴포넌트 인스턴스에 compoenetWillMount(), componentDidMount()가 실행되며, 이전 트리와 연관된 모든 state는 사라진다.

 

ex)

<div><Counter/></div>

to

<span><Counter/></span>

 

2. DOM Element의 타입이 같은 경우

같은 타입의 두 React DOM Element를 비교할 때, React는 두 엘리먼트의 속성을 확인하여

동일한 내역은 유지하고 변경된 속성들만 갱신한다.

 

ex)

<div className="1" title="A"></div>

to

<div className="2" title="A"></div>

 

인 경우에는 DOM 노드 상에 className만 수정한다는 것이다.

이렇게 DOM 노드의 처리가 끝나면, React는 이어서 해당 노드와 자식들을 재귀적으로 처리한다.

 

컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링간 state가 유지된다.

React는 새로운 Element의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 prop을 갱신하고 이때

compoenentWillRecieveProps()와 componentWillUpdate()를 호출한다.

 

그 다음에 render()가 호출되고 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리한다.