렌더링 및 커밋

렌더링 및 커밋

컴포넌트가 화면에 표시되기 전에 React에 의해 렌더링되어야 한다. UI를 요청하고 제공하는 이 프로세스에는 세 단계가 있다.
1. 렌더링 트리거
2. 구성 요소 렌더링
3. DOM에 커밋

렌더링 트리거

구성 요소를 렌더링하는 데는 두가지 이유가 있다
1. 구성 요소의 초기 렌더링
2. 구성요소(또는 상위 구성 요소 중 하나)의 상태가 업데이트

초기 렌더링

앱이 시작되면 초기 렌더링을 트리거해야 한다. createRoot 프레임워크과 샌드박스는 때때로 이 코드를 숨기지만 대상 DOM 노드를 호출한 다음 render 구성 요소로 해당 메서드를 호출하여 수행된다.

state 업데이트 시 다시 렌더링

컴포넌트가 처음 렌더링되면 함수로 state를 업데이트하여 추가 렌더링을 트리거할 수 있다. 컴포넌트의 state를 업데이트하면 렌더링이 자동으로 대기열에 추가된다.

React가 컴포넌트를 렌더링

렌더링을 트리거한 후 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다. 렌더링은 컴포넌트를 호출하는 React이다.

• 초기 렌더링에서는 루트 컴포넌트를 호출
• 후속 렌더링의 경우 state 업데이트가 렌더링을 트리거한 함수 컴포넌트를 호출

React가 변경사항을 DOM에 커밋

구성 요소를 렌더링 한 후 React는 DOM을 수정

• 초기 렌더링의 경우 React는 appendChild() DOM API를 사용하여 생성한 모든 DOM노드를 화면에 화면에 표시한다
• 리렌더링의 겅우 React는 DOM이 최신 렌더링 출력과 일치하도록 최소한의 필수 작업을 적용한다.

Reactg는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.