[React] Render and Commit

 

렌더링하고 커밋하기

컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야 한다. 해당 과정의 단계를 이해하면 코드가 어떻게 실행되는지 이해할 수 있고 React 렌더링 동작에 관해 설명하는데 도움이 된다.

 

학습 내용

• React에서 렌더링의 의미
• React가 컴포넌트를 언제, 왜 렌더링 하는지
• 화면에 컴포넌트를 표시하는 단계
• 렌더링이 항상 DOM 업데이트를 하지 않는 이유

 

UI를 요청하고 제공하는 단계

1. 렌더링 촉발(Triggering)
2. 컴포넌트 렌더링(Rendering)
3. DOM에 커밋(Committing)

Step 1: Tregger a render

컴포넌트 렌더링이 일어나는 두 가지 이유가 있다.

1. 컴포넌트의 첫 렌더링인 경우
2. 컴포넌트의 state(또는 상위 요소 중 하나)가 업데이트된 경우

첫 렌더링

앱을 시작하기 위해서는 첫 렌더링을 촉발해야 한다. 대상 DOM 노드로 createRoot를 호출한 다음, 컴포넌트로 render 메서드를 호출하면 된다.

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

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

state가 업데이트되면 리렌더링한다

컴포넌트가 첫 렌더링되면, set(설정자) 함수로 state를 업데이트하여 추가 렌더링을 촉발할 수 있다. 컴포넌트의 state를 업데이트하면 자동으로 렌더링이 대기열에 추가된다.

Step 2: React renders your components

• React가 컴포넌트를 렌더링한다.
• 첫 렌더링에서 React는 루트 컴포넌트를 호출한다.
• 이후 렌더링에서 React는 state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트를 호출한다.
• 본 과정은 재귀적이다:
  • 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방식이다.
  • 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 이 단계가 반복된다

Strict Mode

• 렌더링은 항상 순수(Pure)해야 한다.
• Strict Mode에서 개발할 때 React는 각 컴포넌트의 함수를 두 번 호출하여 순수하지 않은 함수로 인한 실수를 드러내는데 도움을 준다.

Step 3: React commits changes to the DOM

• React가 DOM에 변경사항을 커밋
• 첫 렌더링의 경우, React는 document.appendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.
• 리렌더링의 경우, React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다.
• React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.
  • 예를 들어, 매초 부모로부터 전달된 다른 props로 다시 렌더링하는 컴포넌트가 있다.
  • <input>에 텍스트를 입력하여 value를 업데이트 하지만 컴포넌트가 리렌더링될 때 텍스트는 사라지지 않는다.
  • 마지막 단계에서 React가 <h1>의 내용만 새로운 time으로 업데이트하기 때문이다. <input>이 JSX에서 이전과 같은 위치로 확인되므로 React는 <input> 또는 value를 건드리지 않는다.

Epilogue: Browser paint

• 에필로그: 브라우저 페인트
• 렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저는 화면을 다시 그린다.
• 이 단계를 "브라우저 렌더링(페인팅)"이라고 한다.

Recap

• React 앱의 모든 화면 업데이트는 세 단계로 이루어집니다.
  1. 촉발
  2. 렌더링
  3. 커밋
• Strict Mode를 사용하여 컴포넌트에서 실수를 찾을 수 있습니다.
• 렌더링 결과가 이전과 같으면 React는 DOM을 건드리지 않습니다.

 

출처

• React - Render and Commit