[모던 리액트 Deep Dive] 2.4 렌더링은 어떻게 일어나는가?

 

리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다.

이 렌더링 과정은 시간과 리소스를 소비해 수행되는 과정으로, 이 비용은 사용자에게 청구되며 시간이 길어지고 복잡해질수록 유저의 사용자 경험을 저해하기 때문에 이러한 렌더링 과정을 최소한으로 줄여야 한다.

 

2.4.1 리액트의 렌더링이란?

리액트에서의 렌더링이란 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다.

 

2.4.2 리액트의 렌더링이 일어나는 이유

1.최초 렌더링 : 처음 진입하면 렌더링해야 할 결과물이 필요한다. 리액트는 브라우저에 이 정보를 제공하기 위해 최초 렌더링을 수행한다.

2.리렌더링 : 최초 렌더링이 발생한 이후로 발생하는 모든 렌더링을 의미한다.

(state가 setter()를 통해 변경, props가 변경, key가 변경, 부모 컴포넌트가 렌더링 될 경우..)

 

근데, useState 등으로 관리되지 않는 단순한 변수는 제아무리 변경된다 하더라도 리렌더링을 발생시키지 않아 변경된 값을 렌더링된 DOM에서 확인할 수 없다.

 

2.4.3 리액트의 렌더링 프로세스

렌더링 프로세스가 시작되면 리액트는 컴포넌트의 루트에서부터 차근차근 아래쪽으로 내려가면서 업데이트가 필요하다고 지정돼 있는 모든 컴포넌트를 찾는다.

함수 컴포넌트의 경우에는 FunctionComponent() 그 자체를 호출한 뒤에, 그 결과물을 저장한다.

렌더링 결과물은 JSX 문법으로 구성돼 있고, 이것이 자바스크립트로 컴파일 되면서 React.createElement()를 호출하는 구문으로 변환된다.

그래서 브라우저의 UI 구조를 설명할 수 있는 일반적인 자바스크립트 객체를 반환한다.(이게 모여서 트리가 되고 가상 DOM이 되는듯?)

 

이런 과정을 거쳐 렌더링 결과물을 수집한 다음, 리액트의 새로운 트리인 가상 DOM과 비교(두개의 가상DOM끼리 비교하는 것)해 실제 DOM에 반영하기 위한 모든 변경사항을 차례차례 수집한다.

이렇게 계산하는 과정을 리액트의 재조정이라고 한다.

이러한 재조정 과정이 모두 끝나면 모든 변경 사항을 하나의 동기 시퀀스로 DOM에 적용해 변경된 결과물이 보이게 된다.

 

2.4.4 렌더와 커밋

리액트의 렌더링은 렌더 단계와 커밋 단계라는 총 두 단계로 분리되어 실행된다.

 

1.렌더 단계

컴포넌트를 렌더링하고 변경 사항을 계산하는 모든 작업을 말한다.(재조정 단계까지겠지?)
여기서 비교하는 것은 크게 type,props,key다. 이 세 가지 중 하나라도 변경된 것이 있으면 변경이 필요한 컴포넌트로 체크해 둔다.

 

2.커밋 단계

렌더 단계의 변경 사항을 실제 DOM에 적용해 사용자에게 보여주는 과정을 말한다. (이 단계가 끝나야 브라우저의 렌더링이 발생한다.)

*그럼 리액트도 DOM 만들고 브라우저도 DOM 만드는거야?
- 리액트는 Virtual DOM을 만들어서 실제 DOM 업데이트를 관리
- 브라우저는 업데이트된 실제 DOM을 받아서 화면에 그리는 작업을 수행

 

리액트의 렌더링이 일어난다고 해서 무조건 DOM 업데이트가 일어나는 것은 아니다.

즉 변경 사항을 계산했는데 아무런 변경 사항이 감지되지 않는다면 이 커밋 단계는 생략될 수 있다.

리액트의 렌더링은 꼭 가시적인 변경이 일어나지 않아도 발생할 수 있다.

 

이 두가지 과정으로 이뤄진 리액트의 렌더링은 항상 동기식으로 작동했다.

(만약 순서가 보장되지 않는 비동기 방식으로 이뤄질 경우, 사용자는 하나의 상태에 대해 여러 가지 다른 UI를 보게 될 것이다.)

근데 B의 컴포넌트 렌더링 작업이 무거워 상대적으로 빠르게 렌더링할 수 있는 C라도 변경해서 보여줄 수 있다면?

그래서 비동기 렌더링, 이른바 동시성 렌더링이 리액트 18에서 도입됐다.