[React] 렌더링(Rendering)

Rendering은 사용자 화면에 View를 보여주는 것을 의미한다.

리액트는 어떤 방식으로 View를 render하길래 데이터가 변할 때 마다 새롭게 렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할까?

 

이를 이해하기 위해서는 '초기 렌더링'과 '리렌더링'의 개념을 이해하고 있어야 한다.

 

"초기 렌더링"

어떤 프레임워크를 사용하든, 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 

렌더링을 해주는 함수로 render(){..}가 있는데, 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.

컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있으며, render는 그 내부에 있는 컴포넌트도 재귀적으로 렌더링하게 한다.

 

이 최상위 컴포넌트의 렌더링 작업이 끝나면 가지고 있는 정보를 사용해 HTML 마크업을 만들고,

이것을 우리가 정하는 실제 페이지의 DOM 요소 내에 주입한다.

 

렌더링할때는 먼저 문자열 형태의 HTML 코드를 생성하고, 툭정 DOM에 해당 내용을 주입하면 이벤트가 적용 된다.

 

 

"조화과정" (reconciliation)

React에서 View를 업데이트할 때, 조화과정을 거친다고 한다.

이 업데이트 과정은 데이터의 변화에 따라 View가 변형되는 것 처럼 보이나, 사시ㅣㄹ은 새로운 데이터를 가지고 render 함수를 또 다시 호출하게 된다.

하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전 render함수가 만들었던 컴포넌트의 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

 

자바스크립트를 이용해 두 가지의 뷰를 최소한의 연산으로 비교한 후에, 둘의 차이를 알아내서 최소한의 연산으로 DOM 트리를 업데이트한다.