[React] Render의 진짜 의미와 동작 원리 (1/3) - Overview

https://codesmoothie.tistory.com/29

[React] Component가 Instance, Element로 변화는 과정

 

해당 글은 "[React] Component가 Instance, Element로 변화는 과정" 포스팅에서 연장되는 글입니다. 이해되지 않는 개념이 있다면 앞선 블로그를 정독하는 것을 권장합니다.

 

 

학습 영역

Component가 스크린 상에 실제 UI로 변하는 과정

 

지난 포스팅에서 Component와 인스턴스 생성 그리고 그것이 화면의 UI로 변하는 과정에 대해 간략히 알아보았다. 하지만, React Element와 DOM Element가 브라우저에서 어떻게 랜더링이 되는지에 대해서는 자세히 다루지 않았다. 다시 말해, 상기 이미지에서 빨간색으로 표현된 영역에 대해서 자세히 알아보고자 한다. 이번 포스팅에서 해당 과정을 전체를 정리해보자. 각 단계별로 자세한 과정은 다음 포스팅에 작성했다.

 

React 컴포넌트가 화면에 그려지는 과정 (Overview)

첫번째, 랜더(Render) 발생(Trigger)하는 단계(Phase)이다. React에서 화면 업데이트는 Render에서 시작한다. Render는 대부분 어플리케이션에 존재하는 State가 변경되면서 발생된다. 즉, 상태(State) 변화(Chage)가 랜더(Render)를 발생(Trigger)시킨다. 

 

두번째, 랜더(Render) 단계(Phase)이다. React가 컴포넌트 함수(functions)를 호출하고, 최근 변경된 State 변경사항을 반영하여 어떻게 DOM을 그릴지 결정하는 단계이다. 하지만, 이 단계에서 실제 DOM이 업데이트 되지는 않는다. React에서 render의 정의는 일반적으로 생각하는 개념과는 매우 다르다. React에서 rendering은 DOM 또는 화면상에 무언가를 그리는 것을 의미하지 않는다. 랜더링은 오직 React 내부 안에서만 발생하며, 화면상의 어떤 변화도 생산해내지 않는다. 대부분 React 개발자들이 랜더링을 화면상에 무언가를 그리는 의미로 사용하는 것은 그렇게 하는 것이 이해하기 쉽기 때문이다. 하지만, Render는 기술적으로 정확하게 Render + Commit 단계를 의미한다. 

 

세번째, Commit 단계(Phase)이다. 현재의 State를 반영하기 위한 새로운 요소(Element)가 DOM에 배치된다. 이미 존재하는 Element의 경우 업데이트, 삭제 등이 된다. Commit 단계가 일반적으로 생각하는 Render 단계와 비슷하다. 마지막으로 브라우저가 DOM이 업데이트 되었다는 것을 알게되고 화면을 다시 그리게 된다.

 

네번째, 브라우저(Browser) 페인트(Paint) 단계이다. 이 단계에서는 React는 어떠한 일도 하지 않는다. 실제로 유저에게 보이는 화면(Visual)을 업데이트하는 단계이다. 

 

React 컴포넌트가 화면에 그려지는 과정 (Overview)

 

Render 단계

Render를 발생시키는 방법은 오직 두 가지만 존재한다. 첫째, 처음으로 어플리케이션을 실행하여 발생하는 Render이다. 둘째, 컴포넌트 인스턴스에서 State 업데이트으로 인해 발생하는 Re-Render이다.

중요한 사실은 Render 프로세스는 하나의 컴포넌트가 아니라 전체 어플리케이션을 위해 발생한다는 것이다. 그렇다고 전체 DOM을 업데이트 시킨다는 의미는 아니다. 앞서 언급했듯이 React에서 rendering이란 오직 컴포넌트 함수를 호출하고 향후 DOM을 어떻게 변경해야할지만 결정하는 단계이기 때문이다. React를 State가 업데이트가 되는 곳만 Re-Render된다고 잘못 알고 있는 사람에게는 혼란스러울 것이다. 하지만, 해당 블로그를 읽어나가다보면 Re-Render가 발생할 때마다 React는 항상 전체 컴포넌트 Tree를 바라본다는 것을 알게 될 것이다.

마지막으로 Render는 State가 업데이트된다고 바로 발생하지 않는다. 그 대신 자바스크립트 엔진이 Free Time일 때 동작하도록 예약을 한다. 이 과정은 우리가 인지하기에는 너무 빠르게 일어나기에 대부분 잘 모른다. 그리고 Render가 batch되어 있는데 같은 함수 내에서 여러개의 setState를 호출하는 등의 다양한 상황이 있을 수 있다. 이러한 복잡한 상황은 다음 블로그에서 포스팅에서 다룰 예정이다.

 

Render 단계

 

 

 

 

다음 글을 아래의 링크로 이동하면 됩니다.

https://codesmoothie.tistory.com/32

[React] Rendering은 어떻게 동작할까? (2/3) - Render 단계