리액트는 이 단계를 의도적으로 두개로 분류하였다.
Render phase: 컴포넌트를 렌더링하고 변경사항을 계산하는 모든 작업Commit phase: 돔에 변경사항을 적용하는 과정리액트가 DOM을 커밋 단계에서 업데이트 한 이후에, 요청된 DOM 노드 및 컴포넌트 인스턴스를 가리키도록 모든 참조를 업데이트 한다.
그런 다음 클래스 라이프 사이클에 있는 componentDidMount, componentDidUpdate 메소드를 호출하고, 리액트 함수형 컴포넌트에서는 **useLayoutEffect**훅을 호출 한다.
리액트는 짧은 timeout을 세팅한 이후에, 이것이 만료되면 **useEffect**를 호출한다. 이러한 단계는 Passive Effects 단계라고도 알려져 있다.
이러한 클래스 라이브 사이클 메소드 다이어그램은 여기에서 확인해 볼 수 있다.
이번에 리액트 18에서 나온 Concurrent Mode의 경우, 브라우저가 이벤트를 처리할 수 있도록 렌더링 단계에서 작업을 일시 중지 할 수 있다. 리액트는 해당 작업을 나중에 다시시작하거나, 버리거나, 다시 계산할 수 있다. 렌더링이 패스가 된 이후에도, 리액트는 커밋단계를 한단계 동기적으로 실행한다.
여기서 중요한 사실은, 렌더링은 DOM을 업데이트 하는 것과 같은것이 아니고, 컴포넌트는 어떠한 가시적인 변경이 없이도 컴포넌트가 렌더링 될 수 있다는 것 이다.리액트가 컴포넌트를 렌더링하는 경우
리액트의 기본적인 동작은 부모 컴포넌트가 렌더링되면, 리액트는 모든 자식 컴포넌트를 순차적으로 리렌더링 한다.
예를 들어, A > B > C > D 순서의 컴포넌트 트리가 있다고 가정해보자. **B**에 카운터를 올리는 버튼이 있고, 이를 클릭했다고 가정해보자.
B**의 **setState()**가 호출되어, B의 리렌더링이 렌더링 큐로 들어간다.