React - Rendering Elements와 React.createElements() 함수에 대해서

React Elements

React의 official document를 참고하면 다음과 같은 내용을 볼 수 있다.

Elements are the samllest building blocks of React apps.

즉 리액트 앱을 구성하는 가장 작은 블록을 Elements라고 한다.

 

아래의 사진과 같이 우리가 크롬에서 개발자 도구로 Elements 탭에서 보는 것들은 DOM Elements이다.

 

그렇다면 React Elements란 무엇일까?

너무나 심플하게도 Virtual DOM에 있는 Elements 를 React Elements라고 한다.

결국 React Elements는 DOM Elements의 가상표현이라고 볼 수 있다.

 

다만 DOM Elements는 React Elements에 비해서 많은 정보를 담고 있기에 크고 무겁다.

 

결국 React Elements는 화면에서 보이는 것들을 기술한다.

 

React Elements의 생김새

React Elements는 자바스크립트 객체 형태로 존재한다.

 

React Elements는 컴포넌트의 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는

일반적인 자바스크립트 객체로서 이 객체는 마음대로 변경할 수 없는 불변의 속성을 가지고 있다.

( 한번 생성되면 바꿀수 없다는 의미 )

 

다음의 React Elements를 살펴보도록 하자.

{
 type : 'button',
 props : {
 	className : 'bg-green',
    children : {
    	type : 'b',
        props : {
        children : 'Hello, elements!'
        	}
     	}
 	}
}

단순히 자바스크립트 객체임을 볼 수 있다.

 

위 React Element가 랜더링 된다면 다음과 같은 DOM Element가 되는 것이다.

 

 

React.createElement()

React.createElements() 메소드의 파라미터는 위와 같이 3가지로 구성되어진다.

 

1) type : HTML 태그 내용이 문자열로 들어가거나 또 다른 리액트 컴포넌트가 들어간다.

결국 type에 들어가는 내용들이 결국 DOM Elements가 되는 것이다.

 

만약 type에 리액트 컴포넌트가 들어간다면?

 

모든 리액트 컴포넌트는 최종적으로는 HTML코드를 사용하게 되어있다. 

하나의 컴포넌트는 여러개의 자식 컴포넌트를 포함할 수 있고 자식 컴포넌트를 쭉 분해하다보면 

결국 HTML코드가 나오게 되는 것이다.

 

 

2) props : Elements의 속성이라고 볼 수 있다. 예를 들면 class나 style 등을 말하는 것이다.

이러한 속성들을 Attribute라고 부른다. props는 이러한 Attribute보다  좀 더  상위의  복잡한 개념이긴하다.

 

3) children : 해당 Element의 자식 Element 들이 들어가게 된다.