React 공식문서 - Render and Commit(렌더링하고 커밋하기)

컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야한다.

 

이 과정을 주방에서 요리사가 재료를 가지고 요리를 한다고 가정해보자.

 

1. 렌더링 촉발(손님의 주문을 주방으로 전달)

2. 컴포넌트 렌더링(주방에서 주문에 대한 요리 준비하기)

3. DOM에 커밋(테이블에 주문한 요리 내놓기)

---

Step 1: Trigger a render(렌더링을 촉발시킵니다)

 

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

1. 컴포넌트의 첫 렌더링인 경우

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

 

1. 컴포넌트의 첫 렌더링인 경우

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

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

 

2. state가 업데이트되면 리렌더링 하는 경우

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

---

Step 2: React renders your components(React가 컴포넌트를 렌더링합니다)

 

렌더링을 촉발시키면, React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다. 즉, 렌더링은 React에서 컴포넌트를 호출하는 것이다.

 

- 첫 렌더링에서 React는 루트 컴포넌트를 호출한다.

- 이후 렌더링에서 React는 state 업데이트에 의해 렌더링이 발동한 함수 컴포넌트를 호출한다.

 

이 과정은 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방식으로 재귀적인 방식이다.(이 방식은 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 이 단계는 계속된다)

 

* 렌더링은 항상 순수한 계산이어야 한다.

동일한 입력에는 동일한 출력을 해야하고, 이전의 state를 변경해서는 안된다.

---

Step 3: React commits changes to the DOM(React가 DOM에 변경사항을 커밋)

 

컴포넌트를 렌더링(호출)한 후 React는 DOM을 수정한다.

 

- 초기 렌더링인 경우 React는 appendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.

- 리렌더링의 경우 React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다.

 

React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다. 예를들어 변하지 않는 내용은 건드리지 않는다.

(부모 컴포넌트와 자식 컴포넌트 관계와는 다른, 하나의 컴포넌트 내에서의 내용이다?)

---

* 참고 : React 공식문서(https://react-ko.dev/learn)