렌더링이란 무엇인가?

컴포넌트를 호출하여 react element를 리턴하고, 이 react element가 Virtual DOM에 적용(재조정)되는 과정을 말한다.

즉, 리액트에서 렌더링이란, 컴포넌트가 현재 props와 state 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다.

렌더링 프로세스 살펴보기

렌더링이 일어나는 동안, 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 흝어 보면서, 업데이트가 필요하다고 플래그가 지정되어 있는 모든 컴포넌트를 찾는다.

만약 플래그가 지정되어 있는 컴포넌트를 만난다면,

클래스 컴포넌트의 경우 classComponentInstance.render() 를,

함수형 컴포넌트의 경우 FunctionComponent() 를 호출하고, 렌더링된 결과를 저장한다.

컴포넌트의 렌더링 결과물은 일반적으로 JSX 문법으로 구성되어 있으며, 이는 js가 컴파일되고 배포 준비가 되는순간에 React.createElement() 를 호출하여 변환된다.

*createElement 는 UI 구조를 설명하는 일반적인 JS 객체인 React를 리턴한다.*

// 일반적인 jsx 문법
return <SomeComponent a={42} b="testing">Text here</SomeComponent>

// 이것을 호출해서 반환된다. (createElement 함수 호출)
return React.createElement(SomeComponent, {a: 42, b: "testing"}, "Text Here")

// 호출결과 element를 나타내는 객체로 변환된다. (createElement 함수 반환 객체)
{type: SomeComponent, props: {a: 42, b: "testing"}, children: ["Text Here"]}

전체 컴포넌트에서 이러한 렌더링 결과물을 수집하고, 리액트는 새로운 오브젝트 트리(가상돔이라고 알려져있는)와 비교하여, 실제 DOM을 의도한 출력처럼 보이게 적용해야 하는 모든 변경 사항을 수집한다. 이렇게 비교하고 계산하는 과정을 리액트에서는 reconciliation(재조정) 이라고 한다.

그런 다음, 리액트는 계산된 모든 변경사항을 하나의 동기 시퀀스로 DOM에 적용한다.

Render와 Commit 단계

리액트는 라이프 사이클을 의도적으로 두개로 분류하였다.