[React] element란?

React Element는 React에서 UI를 구성하는 가장 작은 단위로, 화면에 표시할 내용을 기술하는 자바스크립트 객체입니다.

HTML의 DOM Element와는 다르게 React의 가상 DOM(Virtual DOM)에서 사용됩니다.

React Element는 immutable(불변)하며, 생성 후에는 수정할 수 없다는 특징을 가지고 있습니다.

---

DOM Element vs React Element

1. DOM Element
   • 브라우저에서 실제 화면을 구성하는 요소입니다.
   • HTML 태그(<div>, <button>, <span> 등)와 같은 구조를 가지며, DOM API를 통해 생성 및 조작됩니다.
   • 브라우저 메모리에 저장되어 물리적인 요소로 존재합니다.
2. React Element
   • React에서 정의한 가상 DOM의 요소입니다.
   • 자바스크립트 객체 형태로 존재하며, React가 이를 바탕으로 실제 DOM을 업데이트합니다.
   • 예를 들어, <div> Hello, React! </div>는 React에서 다음과 같은 객체로 표현됩니다.

const element = {
 type: 'div',
 props: {
  children: 'Hello,React!'
 }
};

 

• React Element는 DOM에 직접적으로 접근하지 않고 React 내부에서 관리됩니다.

---

React Element의 특징

1. Immutable(불변성)

React Element는 생성 후 children이나 attributes를 수정할 수 없습니다.

변경하려면 새로운 Element를 생성해야 하며, 이를 통해 React는 상태를 추적하고 업데이트를 효율적으로 처리합니다.

// 이렇게 선언하고
const element = <h1 className="title">Hello, World!</h1>;

// 다음과 같이 내용을 수정할 수 없음
element.props.children = 'Hi, React!";

 

2. 가벼운 객체구조

React Element는 화면에 표시할 내용을 표현하기 위한 최소한의 정보를 포함하는 객체입니다.

이 정보는 React의 렌더링 알고리즘(Reconciliation)에 사용됩니다.

* Reconciliation : React에서 UI 업데이트를 효율적으로 처리하기 위한 알고리즘입니다. React는 상태(state)나 props가 변경될 때 UI를 다시 렌더링합니다. 하지만 전체 UI를 무조건 다시 그리면 성능이 저하될 수 있습니다. 이를 방지하기 위해 React는 가상 DOM(Virtual DOM)을 사용해 변경된 부분만 실제 DOM에 업데이트하는 방식을 사용합니다.

---

React Element를 렌더링하는 방법

React Element를 렌더링하려면 createRoot()를 사용해야 합니다. 이를 통해 React Element를 root DOM node에 연결합니다.

* Root DOM Node는 React 애플리케이션이 렌더링될 HTML의 기본 컨테이너 요소를 말합니다. React는 이 노드를 기준으로 UI를 렌더링하고 관리합니다. 보통 이 노드는 HTML 파일의 <div>나 <main> 태그로 정의됩니다.

import React from 'react';
import ReactDOM from 'react-dom/client';

// React Element 생성
const element = <h1>Hello, React!</h1>;

// Root DOM Node에 렌더링
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

---

React Element 업데이트하기

React Element는 불변 객체이므로 직접 업데이트할 수 없습니다. 업데이트하려면 변경된 내용을 반영한 새로운 React Element를 생성하고 다시 렌더링해야 합니다.

// 초기 렌더링
const element = <h1>Hello, React!</h1>;
root.render(element);

// 업데이트하려면 새 Element 생성
const updatedElement = <h1>Hello, Updated React!</h1>;
root.render(updatedElement);

React는 가상 DOM(Virtual DOM)을 이용하여 이전 Element와 새 Element를 비교(diffing) 한 후 필요한 부분만 실제 DOM에 업데이트합니다. 이를 통해 DOM 조작의 성능 저하를 최소화할 수 있습니다.

---

Summary

• React Element는 React의 UI 구성 요소로, 자바스크립트 객체 형태로 존재합니다.
• DOM Element와는 다르며, React가 가상 DOM에서 관리합니다.
• React Element는 불변성(Immutable)을 가지며, 한 번 생성되면 수정이 불가능합니다.
• 업데이트를 위해서는 새 Element를 생성해야하며, React가 변경된 부분만 실제 DOM에 반영합니다.

React Element는 React의 기본적인 빌딩 블록이자, React의 효율적인 렌더링 구조를 이해하는 데 중요한 개념입니다.