[리액트 공식문서] 상호작용성 더하기 - (3) 렌더링 그리고 커밋

컴포넌트가 화면에 표시되는 과정은 다음의 3단계로 이루어집니다. 

 

1. 렌더링 트리거

렌더링은 React에서 컴포넌트를 호출하는 것입니다. 이러한 렌더링은 다음 두 경우에서 트리거됩니다.

 

(1) 컴포넌트의 초기 렌더링인 경우

• createRoot()에 화면에 보일 DOM 노드(루트 노드)를 인수로 넣어 호출 -> 객체에 할당
• 할당된 객체로 render() 메서드를 호출 -> 렌더링 트리거

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

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

 

(2) 컴포넌트의 state가 업데이트된 경우

• set 함수를 통해 state를 업데이트하여 추가적인 렌더링을 트리거합니다.
• 컴포넌트의 state를 업데이트하면 자동으로 렌더링 대기열에 추가됩니다.

---

2. React 컴포넌트 렌더링

렌더링을 트리거한 후, React는 컴포넌트를 호출하여 화면에 어떤 내용이 표시될지 확인합니다. 

• 초기 렌더링의 경우
  • React는 루트 컴포넌트를 호출합니다.
  • React는 Virtual DOM 트리를 생성합니다.
• state 업데이트로 렌더링 될 경우
  • React는 업데이트가 일어난 컴포넌트를 호출합니다.
  • 새로 Virtual DOM 트리를 구성하고, 이전 렌더링(이전 Virtual DOM)과 비교하여 변경된 속성을 계산합니다.

만약 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 그 컴포넌트도 이후에 렌더링됩니다. 중첩된 컴포넌트가 더 이상 없을 때까지 렌더링이 재귀적으로 계속됩니다.

 

 

---

 

+

 

컴포넌트 렌더링은 순수성이 존재하므로, 다음의 두 가지 규칙을 만족해야 합니다.

• 동일한 입력이 주어지면 항상 동일한 출력을 반환해야 한다.
• 이전 state를 변경하면 안된다. 즉, state는 불변성(immutability)을 유지해야 한다. -> 항상 새로운 상태 객체를 만들어 React에 전달한다.

 

Strict Mode를 이용하여 개발한다면 각 컴포넌트의 함수를 두 번 호출하므로, 순수하지 않은 함수로 인한 실수를 잡는 것에 도움이 됩니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

 

Strick Mode 컴포넌트로 감싼 하위 컴포넌트들에 대해 모두 적용되기 때문에 일부분만 활성화할 수도 있습니다.

• 버그를 찾기 위해 순수 함수여야 하는 특정 함수들이 두 번 호출됩니다.
  • 컴포넌트 함수, useState, set 함수, useMemo, useReducer에 전달한 함수
  • constructor, render, shouldComponentUpdate 등
• 버그를 찾기 위해 effects를 두 번 실행합니다. -> 셋업 + 클린업 사이클을 실행합니다.
• 더 이상 사용되지 않는 API 사용 여부를 확인합니다.
• 개발 환경에서만 실행되며, 빌드에는 영향을 미치지 않습니다.

 

---

3. React가 DOM에 변경사항을 커밋

컴포넌트가 렌더링 된 이후에, React는 DOM을 수정합니다. 즉 변경 사항을 실제 DOM에 적용합니다.

• 초기 렌더링의 경우
  • appendChild() DOM API를 사용 -> 생성한 모든 DOM 노드를 화면에 표시
• 리렌더링의 경우
  • React는 렌더링하는 동안 계산된 작업을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 만듬
  • React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경

---

4. 브라우저 페인트(페인팅)

 

React가 DOM을 업데이트하면 브라우저는 화면을 다시 그립니다.

 

---

참고 문서

https://ko.react.dev/learn/render-and-commit

렌더링 그리고 커밋 – React

 

https://ko.react.dev/reference/react/StrictMode

<StrictMode> – React