[React 문서] Render and Commit

React Render and Commit의 과정

1. 렌더링 촉발
2. 컴포넌트 렌더링
3. DOM에 커밋
   
   

Step1. 렌더링 촉발

1. 컴포넌트의 첫 렌더링인 경우

• 대상 DOM 노드(id=“root”)로 createRoot를 호출한 다음 render 메서드 실행

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

2. 컴포넌트 혹은 부모 컴포넌트의 중 하나의 state가 업데이트된 경우

• 초기 랜더링 이후 set 함수로 state 를 업데이트하게 되면 자동으로 랜더링 대기열에 추가됨
• state 의 업데이트 => 원시 타입 혹은 참조 타입 이해 필요
  
  

Step2. 컴포넌트 렌더링

• 렌더링이 Step1의 조건으로 촉발되면 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다.

렌더링 = React 가 컴포넌트를 호출하는 것

• 초기 렌더링에서 React는 루트 컴포넌트를 호출하고 이후 리렌더링에서는 렌더링이 촉발된 함수 컴포넌트를 호출한다.

• 이 과정이 모두 재귀적으로 진행된다.

• 리렌더링하는 동안 React는 이전 렌더링 이후 변경된 속성을 계산하며 다음 커밋 단계 전까지는 해당 정보로 아무 작업도 수행 하지 않는다.
  
  

Step3 DOM에 커밋

• 컴포넌트를 호출(렌더링)한 후 React는 DOM을 수정

1. 초기 렌더링에서 React 는 Node.appendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시
2. 리렌더링에서는 Step2 단계에서 계산된 최소한의 작업을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다. 렌더링 결과가 이전(DOM구조)과 같으면 React는 DOM을 건드리지 않는다.(값이 변경 되더라도 깜빡이는 현상 없음)
   
   

브라우저 페인트(브라우저 렌더링)

• 렌더링이 완료(Step2)되고 React가 DOM을 업데이트(Step3)한 후 브라우저는 화면을 다시 그린다.