Render Optimization

React의 렌더링 과정

리액트에서 렌더링이라는 단어가 굉장히 많이 혼용되고 있다.
렌더링을 보통 Virtual DOM, 어떠한 상태가 변경되었을 때 리액트의 컴포넌트 트리가 변경되는 과정
++ UI가 그려지는 과정
이라고 얘기이라고 칭하곤 한다.
이를 좀 더 자세하게 생각해보면 다음과 같을 것이다.

컴포넌트 재조정 = 렌더 함수를 실행할 지 결정
렌더링 = 실행된 이전 <> 현재 렌더 함수의 결과물인 React Element Tree 비교 후 
	   실제 UI 변경이 필요한 경우
       플랫폼에 맞는 UI 그리는 API 실행  (DOM / Obj-C / Java / .net ...)

그런데 리액티 15인가 16에 이제 ReactDOM 을 따로 분리하게 되면서
컴포넌트 재조정과 렌더링이 다른 절차, 각각 나위어져있는 절차로 실행되게 된다.

즉, Virtual DOM 비교와 실제 렌더링 과정은 분리되어 있다.

=> 컴포넌트의 렌더 함수를 실행하더라도 UI는 바뀌지 않을 수 있다.