위 표는 클래스 컴포넌트의 라이프 사이클 실행 시점을 나타내는 표로 오다가다 많이 보셨을 겁니다.
표의 왼쪽을 보면 리액트를 개발하면서 접해보지 못한 단어들이 보입니다. Render phase, Commit phase
표의 설명만 봐서는 무엇이 중시되고 다시 시작될 수 있는지, side effect는 무엇인지 이해하기가 쉽지 않습니다.
Render phase는 쉽게 말해 VDOM 조작 단계라고 생각하면 됩니다.
리액트는 렌더링 조건에 의해서 변경점이 생겼을 때(element의 추가, 수정, 삭제) 이를 VDOM에 반영하기 위해 reconciliation(재조정)을 담당하는 함수를 scheduler를 통해 실행시킵니다.
Render phase는 VDOM 을 재조정하는 일련의 과정입니다. 재조정을 담당하는 reconciler의 설계가 스택 기반에서 fiber architecture로 넘어오면서 이 과정을 abort(중단), stop(중지), restart(다시시작) 할 수 있게 되었습니다.
이 기능은 concurrent mode 에서만 비동기와 함께 이루어지며 legacy mode(현재 우리가 일반적으로 사용하는)에서는 위 기능 없이 동기적으로 Render phase가 동작합니다.
즉, 컴포넌트 호출은 Render phase에서 실행되며 호출이 곧 화면 반영을 나타내지는 않습니다. 렌더링이나 리렌더링이 된다는 말은 컴포넌트 호출되고 그 결과가 VDOM에 반영된다는 것이지 DOM에 마운트되어 Paint 된다는 뜻은 아닙니다.