Render and Commit

React는 세 단계로 화면을 그린다.

 

1. trigger: render를 수행시킨다. 초기 렌더링, 컴포넌트의 상태 변경이 trigger에 해당한다.

 

2. render: React는 상태 갱신이 발생한 컴포넌트들을 호출(랜더링)한다. 호출된 컴포넌트의 하위 컴포넌트들도 React가 호출한다. 끝자락 컴포넌트에 도달할 때까지 React는 컴포넌트들을 계속 호출한다. 이를 통해 React가 화면에 다시 그려야할 컴포넌트들을 파악한다.

 

3. commit: React는 대상 컴포넌트들을 랜더링 한 후, DOM에 변경된 컴포넌트들만 반영한다.(이전 렌더링 결과와의 차이에 대해서만 DOM에 반영)

 

*React가 DOM을 갱신하면 브라우저가 화면을 다시 그린다.

 

출처: https://react.dev/learn/render-and-commit#step-2-react-renders-your-components