React Rendering

React가 컴포넌트에게 현재 Props와 State를 기반으로 UI가 어떻게 생겼으면 좋겠는지 알려달라고 요청하는 과정

Render의 3단계

1. Triggering a render (주문을 주방에 배달)
2. Rendering the component (주방에서 주문대로 요리)
3. Committing to the DOM (손님에게 서빙)

Step 1: Trigger a render

• render가 일어나는 두 가지 원인(trigger)
  1) initial render (컴포넌트의 최초 렌더)를 해야할 때
  2) 컴포넌트(혹은 그 조상)의 state가 업데이트 됐을 경우

Initial render

• createRoot()로 root node 지정
• render()로 최상위 컴포넌트 렌더 작업

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);

state 업데이트 시 Re-render

• set 함수를 사용해 state를 업데이트 해서 render를 trigger 할 수 있다.
• 리액트는 component의 state 업데이트를 감지하면 render를 자동으로 큐(queue)에 넣는다.

Step 2: React renders your components

• render가 trigger 된 후에, 리액트는 화면에 무엇을 띄울 것인지 알아내기 위해 components를 호출하는 단계. (단지 컴포넌트를 calling!하는 것. 실제 적용은 다음 스텝에서)
• "Rendering" : 리액트가 컴포넌트를 호출하는 것

initial render vs. 그 이후의 렌더(re-render)

initial render

• initial render(초기 렌더) 시, root 컴포넌트를 호출
• 모든 요소(태그)에 대한 노드를 생성(하도록 계산)

re-render

• 그 이후의 render 시, render를 trigger한 state가 업데이트(setState)된 함수 컴포넌트를 호출
• 이전 상태와 비교해 변화가 있는 부분을 계산
  (다음 스텝(commit phase) 전까지는 아무 작업도 하지 않음)

Step 3: React commits changes to the DOM

• React는 기존 render와 새로운 render의 결과물에 차이가 있을 경우에만 DOM node들을 변경한다. (그렇지 않으면 DOM에 접근하지 않음)

initial render 할 경우의 commit

• 리액트는 appendChild()라는 DOM API를 사용해 모든 DOM node들을 화면에 표시

re-renders 할 경우의 commit

• 새로 render한 결과물로 변경하기 위해 필요한 최소 작업(렌더링 중에 계산됨!)을 적용.

---

Rendering, 그 후... Browser paint

• 렌더링이 끝나고 리액트가 DOM을 업데이트 한 후, 브라우저는 화면을 repaint한다. (브라우저 렌더링)

레퍼런스

• Render and Commit