Render phase

• VDOM 조작 단계
• 리액트는 변경점이 생겼을 때(element의 추가, 수정, 삭제)
• 이를 VDOM에 반영하기 위해 Work를 담당하는 함수를 scheduler를 통해 실행시킨다.

Work

Work는 고유명사로 추후에 다루게 되는 reconciler가 컴포넌트의 변경을 DOM에 적용하기 위해 행하는 작업을 이야기한다. 이 Work를 통해 Render phase, Commit phase가 진행된다.

• Render phase는 VDOM을 재조정하는 일련의 과정
• 재조정을 담당하는 reconciler의 설계가 스택 기반에서 fiber architecture로 넘어오면서 이 과정을 abort, stop, restart 할 수 있게 되었다
• 이 기능은 concurrent mode에서만 비동기와 함께 이루어지며 legacy mode(현재 우리가 일반적으로 사용하는 ReactDOM.render())에서는 위 기능 없이 동기적으로 Render phase가 동작한다.
• 컴포넌트 호출은 Render phase에서 실행되고, 호출이 곧 화면 반영을 의미하는 것은 아니다
• 컴포넌트가 리-렌더링 된다는 말은 컴포넌트가 호출되고 그 결과가 VDOM에 반영된다는 것이지 DOM에 마운트되어 페인트 된다는 뜻이 아니다

Commit phase

• Commit phase는 Render phase에서 재조정된 VDOM을 DOM에 적용하고 라이프 사이클을 실행하는 단계이다
• 여기서도 마찬가지로 DOM에 마운트 된다는 것이지, 페인트 된다는 것이 아니다.
• 이 단계는 모드와는 상관없이 항상 일관적인 화면 업데이트를 위해 동기적으로 실행 된다
• 동기적으로 실행된다는 건 콜 스택을 한 번도 비우지 않고 DOM 조작을 일괄처리한다는 뜻이다.
• 그러므로 Commit phase 중간에 페인트 되지 않는다
• 이 단계가 끝나고 리액트에서 콜 스택을 비워줘야지만 브라우저에서 화면을 페인트할 수 있게 된다.

VDOM