[React] Element란?

개요

JSX란?

 

JSX에 대해 알아본 지난 글에 이어 오늘은 React에 기본 중에 기본! Element에 대해 정리해보겠다.

 

1. React Element란?

Element는 영어 뜻  그대로 해석하면 요소, 원소라는 뜻.

즉, React Element는 React에서 UI를 구성하는 가장 기본적인 단위로 화면에 표시되는 컴포넌트의 최소 단위 역할을 한다.

 

1-1. React Element 와 DOM Element 비교

 

크롬에서 개발자 도구를 켰을 때(option + command + i) 다음과 같이 요소라는 카테고리가 나타난다. 아마 한글이니까 이렇게 나오고, 영어로 나오면 Elements 이렇게 나오겠지?

 

암튼 원래 웹에서 Element라는 용어는 DOM 객체에서 사용하는 용어이다.

 

하지만 React에서는 React Element라는게 있는데, 뭔지 알아보자.

 

React Element

-> Virtual DOM의 일부로, UI를 설명하는 자바스크립트 객체이다.

-> 직접 실제 DOM을 조작하는 경우 변경이 있을 때마다 전체 DOM을 다시 렌더링해야 해서 성능에 부담이 발생할 수 있다.

-> 하지만 React Element는 Virtual DOM을 통해 변경 사항을 최소한으로 적용하고, 필요한 부분만 실제 DOM에 반영해 효율적으로 UI를 업데이트 할 수 있다.

 

DOM Element

-> 브라우저에서 실제로 존재하는 HTML 요소이다.

-> React Element는 React의 Virtual DOM을 통해 비교 및 업데이트가 이루어지지만, DOM Element는 직접 변경해야 한다.

-> 그렇기에 성능 상에 이점을 얻기 위해 React Element를 통해 Virtual DOM을 사용하는 것!

 

1-2. React Element 생성

React Element는 React.createElement(type, props, children) 함수를 사용해 생성된다.

 

이때,

: type

-> 요소의 타입(HTML 태그 및 React 컴포넌트0

 

: props

-> 속성 객체 (자식 속성 포함)

 

: children

-> 내부의 요소

JSX로 생성

const element = <h1>더 울어라 젊은 인생아</h1>;

 

위에 있는 코드는 내부적으로 아래 코드와 같이 변환된다.

const element = React.createElement("h1", null, "더 울어라 젊은 인생아");

 

확실히 JSX 쓰면 코드 작성 면에서 편한 것 같다.

 

1-3. React Element의 특징

1) 불변성(Immutable)

-> React Element는 불변 객체이기 때문에 상태 변화에 따라 UI를 업데이트하려면 새로운 Element를 생성해야 한다.

 

2) 가벼운 객체

-> Element는 실제 DOM이 아닌, Virtual DOM을 구성하는 가벼운 객체이다.

-> React Element를 비교해서 최소한의 변경 사항만 실제 DOM에 반영한다.

 

3) 타입이 다양함

-> Element 타입은 HTML 태그 문자열 , React 컴포넌트일 수 있다.

// HTML 태그를 사용한 React Element
const divElement = <div>Hello, React!</div>;
const spanElement = <span>이것은 span 태그</span>;

// 함수형 컴포넌트를 사용한 React Element
function MyComponent() {
  return <h1>My Custom Component</h1>;
}
const componentElement = <MyComponent />;

// 클래스형 컴포넌트를 사용한 React Element
class MyClassComponent extends React.Component {
  render() {
    return <h1>Class Component</h1>;
  }
}
const classComponentElement = <MyClassComponent />;

 

 

2. React Element 렌더링 과정

React에서 Element가 화면에 표시되는 과정은 다음과 같다.

 

1) Element 생성

const element = <h1> 넘어져도 괜찮아 </h1>;

 

2. ReactDOM을 통해 렌더링

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

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

 

root.render(element); 는 Virtual DOM을 생성하고, 비교해서 실제 DOM에 업데이트한다.

 

3. 변경 감지 및 업데이트

-> 상태가 변경되면 React는 새로운 Element를 생성하고, 이전 Element와 비교해 변경된 부분만 업데이트한다.

-> 이 과정속 Reconcilation(재조정) 알고리즘이 작동해 성능을 최적화한다.