[React Official Document] #3 Render and Commit

본 문서에서는 리액트의 렌더링 과정에 대해 설명하고 있다. 

리액트에서 레더링이 무엇을 의미하는지, 컴포넌트가 렌더링되는 시기와 이유, 컴포넌트가 화면에 보여지는 과정, 왜 렌더링이 항상 DOM 업데이트를 일으키는 것은 아닌지에 대해 알 수 있다. 

 

렌더링 과정은 크게 세 단계로 진행된다. 

1. 렌더링을 일으키기 (Trigger a render)
2. 컴포넌트 렌더링하기
3. DOM에 커밋하기

컴포넌트를 음식, 리액트를 종업원이라 비유해보자. 

종업원(리액트)은 주문(request)을 받으면 주방에 전달해주고, 음식이 나오면 전달해준다.

렌더링 과정은 다음과 같이 비유될 수 있다. 

1. 렌더링 일으키기: 손님의 주문을 주방에 전달하기
2. 컴포넌트 렌더링하기: 주방에서 음식 준비하기
3. DOM에 커밋하기: 손님에게 음식 전달하기

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

Render and Commit – React

---

1. 렌더링 일으키기 (Trigger a render)

컴포넌트를 다시 렌더링하는 것은 두 가지의 경우가 있다. 

1. 컴포넌트의 최초 렌더링
2. 컴포넌트(또는 상위 컴포넌트)의 상태 업데이트

컴포넌트의 최초 렌더링

애플리케이션이 처음 시작하면 최초 렌더링을 일으킨다(Trigger).

타겟 DOM에 createRoot를 사용해 root노드를 생성하고 render() 함수를 호출하는 것을 '렌더링'이라고 부르는 것이다. 

이 과정은 프레임워크에서 숨겨질 때도 있다. 

 

컴포넌트(또는 상위 컴포넌트)의 상태 업데이트

상태를 업데이트하면 자동으로 렌더링을 대기열에 추가한다. 

리액트 상태 변경이 화면 업데이트로 이어지는 핵심 동작이다. 

위의 비유에서 고객이 추가적인 주문을 하는 것이라 할 수 있다. 

 

2. 컴포넌트 렌더링하기

렌더링은 렌더링 할 함수 컴포넌트를 호출하는 것과 같다.

최초의 렌더링에서는 리액트가 root 컴포넌트를 호출하고, 

그 이후에는 리렌더링을 일으키는(trigger) 함수 컴포넌트를 호출한다.

이 과정은 재귀적으로 이루어진다. 

만약 컴포넌트가 다른 컴포넌트를 호출하고 있다면, 더이상 호출할 컴포넌트가 없을 때 까지 계속된다.

최초의 렌더링은 리액트가 DOM 노드를 생성하는 것에서 부터 시작된다. 

DOM 노드는 document.createElement() 함수로 생성된다.

리렌더링 과정에서 이전의 렌더링 상태와 현재 렌더링 상태를 비교한다.

여기서 어떤 속성이 변경되었는지 감지하는데, 이 정보는 다음 단계에서 사용된다.

 

3. DOM에 커밋하기

컴포넌트를 렌더링(컴포넌트 함수를 호출)하고 DOM을 수정한다.

최초의 렌더링에서는 모든 DOM 노드들을 DOM API(appendChild())를 사용하여 화면에 생성한다.

리렌더링을 할 때는 리액트가 최소한으로 필요한 동작을 적용하여 DOM을 최신 렌더링 결과와 일치하게 한다.

이 동작은 렌더링 중에 계산되며 최적화된 방식으로 DOM을 업데이트 한다.

리액트의 성능 최적화 메커니즘 중 하나인 가상 DOM을 의미한다.

이렇게 함으로써 모든 DOM을 리렌더링하지 않고 화면을 업데이트하여 빠른 렌더링이 가능하다.

리액트를 처음 배울 때, 이전의 화면과 이후의 화면을 비교하여 변하는 부분만 업데이트 한다고 배웠다. 

그것이 바로 여기서 일어나는 것이다.

 

+ 추가

리액트가 DOM에 업데이트를 하면 브라우저가 화면에 보여줄것이다. 

이것은 브라우저 렌더링이라 한다.