리엑트는 "렌더링과정"을 통해 실제 브라우저 DOM을 업데이트할 범위를 결정하고 반영하고

렌더링 과정은 총 3가지 단계로 나눠진다.

"Trigger" 렌더링을 유발합니다. 앱 시작 초기(initial render) 또는 state의 변경이 있을 때(re-render)에 해당합니다.

"Render" Render 단계에서는 브라우저 DOM에 반영될 요소를 계산합니다. 즉, 브라우저 DOM에 업데이트 하기 전에 가상돔을 조작하여 업데이트할 모양을 만들어 내는 단계입니다. 가상돔을 통해 업데이트를 미리 실행하는 이유는 브라우저 DOM을 직접 조작하는 비용(repaint, reflow)이 크기 때문입니다. 초기 렌더라면 Root component를 호출하여 전체 엘리먼트에 대한 가상돔을 만들지만, 리렌더라면 이전 렌더와 비교하여 변화가 있는 컴포넌트를 호출합니다.

"Commit" Render 단계를 통해 호출된 컴포넌트들이 브라우저 DOM에 적용되는 단계입니다. 렌더 단계에서 변화가 있었던 부분만 DOM에 마운트되고 라이프 사이클을 실행합니다.