11화: Render and Commit

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash 의 Ratanjot Singh 님의 참새 사진

공식 문서

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

Render and Commit – React

1단계: 렌더링 촉발시키기

컴포넌트의 렌더링 조건은 두 가지

1. 컴포넌트의 초기 렌더: createRoot와 그것의 render를 통해 이루어짐
2. 컴포넌트 자신 혹은 조상 중 하나의 상태가 바뀌었을 때: 자동적으로 렌더링을 대기열에 추가함

2단계: 리액트가 컴포넌트를 렌더링하기

• "렌더링" 이란 리액트가 컴포넌트들을 호출하는 것
• 초기 렌더: 리액트가 루트 컴포넌트를 호출
• 이후 렌더: 리액트가 상태 변경으로 인해 렌더링을 유발한 함수형 컴포넌트를 호출함
• 이 과정은 자식들에 대해 재귀적으로 일어남
• 렌더링은 항상 순수함수처럼 동작해야 함 (Strict Mode 활용하기)
• 바뀐 컴포넌트의 모든 후손들까지 렌더링하는 건 성능적으로 최적화된 건 아님. 해결책이 몇 가지 있지만, 성급한 최적화는 늘 경계하자

3단계: 리액트가 변화를 DOM에 commit하기

• 렌더링 이후 리액트가 DOM을 바꿈
• 초기 렌더: 리액트가 appendChild()를 써서 만들어둔 DOM node들을 붙임
• 이후 렌더: 최소한의 연산만 사용해서 DOM이 최근 렌더링 결과와 일치하게끔 고침
• 리액트는 두 렌더링 결과 사이에 차이가 있을 때만 DOM을 바꿈

마무리: 브라우저의 그림 그리기 시간

• 렌더링이 끝나고 브라우저는 화면을 다시 그림(repaint)
• '브라우저 렌더링' 이라고 부르지만 리액트 렌더링과의 혼선 방지를 위해 'painting'으로 표현함