[React] 렌더링과 커밋

 

React에서 렌더링의 의미

• React 에서는 컴포넌트를 화면에 표시하기 전 렌더링을 해야합니다.
• React 가 컴포넌트를 화면에 표시하는 과정입니다.
  1. 렌더링 트리거
  2. 컴포넌트 렌더링
  3. DOM 에 커밋

---

화면에 컴포넌트를 표시하는 단계

1 단계: 렌더링 트리거

• 컴포넌트 렌더링이 일어나는 두 가지 트리거
  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(); // 초기 렌더링 트리거

• State 업데이트 시 리렌더링
  • 컴포넌트가 렌더링된 이후 set 함수를 통해 상태를 업데이트하여 리렌더링을 트리거할 수 있습니다.
  • 컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가됩니다.

2 단계: 컴포넌트 렌더링

• 렌더링을 트리거한 후 React 는 컴포넌트를 호출해 화면에 표시할 내용을 파악합니다.
• 렌더링은 React 에서 컴포넌트를 호출하는 과정입니다.
  • 초기 렌더링에서는 루트 컴포넌트를 호출합니다.
  • 리렌더링에서는 상태 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출합니다.
• 재귀적 단계
  • 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React 는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 다른 컴포넌트를 반환하면 해당 컴포넌트를 리렌더링하는 방식입니다.
  • 중첩된 컴포넌트가 더 이상 없을 때까지 계속됩니다.
• 초기 렌더링을 하는 동안 React 는 태그에 대한 DOM 노드를 생성합니다.
• 리렌더링하는 동안 React 는 이전 렌더링 이후 변경된 속성을 계산합니다. 다음 단계인 커밋 단계까지는 해당 정보로 아무런 작업도 수행하지 않습니다.
• 성능 최적화
  • 중첩된 컴포넌트를 렌더링하는 동작은 업데이트된 컴포넌트가 트리에서 매우 높은 곳에 있는 경우 성능최적화되지 않습니다.
  • https://ko.legacy.reactjs.org/docs/optimizing-performance.html

3 단계: DOM 에 커밋

• React 는 컴포넌트를 렌더링한 후 DOM 을 수정합니다.
• 초기 렌더링의 경우
  • appendChild()DOM API 를 사용하여 생성한 모든 DOM 노드를 화면에 표시합니다.
• 리렌더링의 경우
  • 필요한 최소한의 작업을 적용해 DOM 이 최신 렌더링 결과와 일치하도록 합니다.
• React 는 렌더링 간 차이가 있는 경우만 DOM 노드를 변경합니다.

https://julesblom.com/writing/react-hook-component-timeline

---

결론

• React 앱의 화면 업데이트는 3 단계로 이루어집니다.
  1. 트리거
  2. 렌더링
  3. 커밋
• 렌더링 결과가 이전과 같으면 React 는 DOM 을 건드리지 않습니다.