[React] Element

React Element

1. React Element는 화면을 구성하는 가장 작은 블록이다.

먼저 블록은 JavaScript 객체를 의미한다.

예를 들어,

<div>Hello</div>

이러한 코드를 작성하면, React는 이 코드를

const element = {
  type: 'div',
  props: {
    className: 'greeting',
    children: 'Hello'
  }
};

이와 같은 '블록(Block)'으로 인식한다. 다시 말해, React Element는 JavaScript 객체이다.

코드를 살펴보면, React는 type은 div, 내용은 Hello라고 인식한 뒤 브라우저 화면에 렌더링을 한다. React에서 element의 '렌더링(Rendering)'이란 React의 렌더링 속도를 높이기 위한 가상 돔, 즉 Virtual Dom에서 실제 Dom으로 이동하는 과정을 말한다. 이를 통해 element라는 화면을 구성하는 가장 작은 요소를 화면에서 볼 수 있는 것이다.

 

2. React Element는 '출력(Output)'이다.

컴포넌트(Component)에 입력으로 Props(속성)을 넣으면, Element라는 결과가 리턴된다. 예를 들어 정사각형 컴포넌트를 만들어 Props로 노란색, 파란색, 검정색의 색상을 각각 집어 넣어 결과를 보면, 서로 색상이 다른 element들이 만들어진다. 즉, 컴포넌트는 일종의 '틀'이 되고, element는 틀에 의해 만들어진 결과가 된다.

 

3. 불변성을 가진다.

React Element는 한번 만들어지면, 바뀔 수 없다. '도장'이라는 컴포넌트에 '파란색 잉크'라는 Props를 넣어 '파란색 도장'을 한번 종이에 찍으면, 이것을 바꿀 수 없는 것이라고 생각해볼 수 있다. 따라서 화면의 모습을 바꾸기 위해서는 기존 element를 변화시키는 것이 아닌, 새로운 element를 생성해서 보여준다. 이것을 렌더링 할 때는 Virtual Dom에서 변화한 element를 찾아 그것만 기존 element에 연결하여 렌더링한다. 모든 것을 바꾸는 것이 아니라 바뀐 것만 대체하므로 렌더링 속도가 높아지는 것이다.

 

4. Component Element와의 차이점

Component Element도 자바스크립트 객체이다. 그러나 React Element는 type에 작은따옴표(single quotation mark)가 들어가지만, Component Element의 type은 작은따옴표가 없다. 이는 Component Element의 type에는 HTML 태그가 아닌, Component의 이름이 들어가기 때문이다. Component Element의 예시는 다음과 같다.

{
  type: Button,
  props: {
    color: 'green',
    children: 'Hello, element!'
  }
}

 

5. Root Dom Node

<div id="root"></div>

이 HTML 코드는 모든 리액트 앱에 존재하며, 해당 div 태그 안에서 React Element가 렌더링 된다. 이 코드를 'Root Dom Node'라고 하는데, 이 div 태그 안에 있는 모든 것들은 React Dom에 의해 관리되기 때문이다. Root라는 이름처럼, Virtual Dom의 최상단 노드를 의미한다.

출처: 처음 만난 리액트 v4

 

React로만 만들어진 웹사이트는 한 개의 Root Dom Node를 가진다.

 

6. 렌더링 할 때 사용하는 함수

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

 

7. HTML Element와의 차이점

React Element는 Virtual Dom에서 만들어진 것이고, HTML Element는 실제 Dom에서 만들어진 것이다. HTML Element는 가변성을 가진다.