React - 리엑트의 랜더링 과정

렌더링 - 컴포넌트에게 현재 Props와 State에 기반하여 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정이다.

 

크게 3개의 단계로 나뉜다.

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(<Image />);

 

State 업데이트 시 리렌더링 
컴포넌트가 처음으로 렌더링 된 후에는 set 함수를 통해 상태를 업데이트하여 추가적인 렌더링을 트리거할 수 있다. 컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가된다. (레스토랑의 손님이 첫 주문 이후에 디저트 등의 메뉴를 추가 주문하는 것으로 상상해 볼 수 있다.)

 

2단계: React 컴포넌트 렌더링 

렌더링을 트리거한 후 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악. “렌더링”은 React에서 컴포넌트를 호출하는 것이다.

1. 초기 렌더링에서 React는 루트 컴포넌트를 호출.
2. 이후 렌더링에서 React는 state 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출.

초기 렌더링 하는 동안 React는 <section>, <h1> 그리고 3개의 <img> 태그에 대한 DOM 노드를 생성한다.
리렌더링하는 동안 React는 이전 렌더링 이후 변경된 속성을 계산한다.

다음 단계인 커밋 단계까지는 해당 정보로 아무런 작업도 수행하지 않는다.

 

3단계: React가 DOM에 변경사항을 커밋 

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

1. 초기 렌더링의 경우 React는 appendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.
2. 리렌더링의 경우 React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것!)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다.

React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.

예를 들어 매초 부모로부터 전달된 다른 props로 다시 렌더링하는 컴포넌트가 있으면 <input>에 텍스트를 입력하여 value를 업데이트 하지만 컴포넌트가 리렌더링될 때 텍스트가 사라지지 않는다.

 

렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저는 화면을 다시 그린다. 이 단계를 “브라우저 렌더링”이라고 한다.

 

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