Element

React Element

Element는 컴포넌트의 구성요소이며 React App을 구성하는 가장 작은 단위로 화면에 표시할 내용을 기술합니다.

DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당합니다.

React 라이브러리에 있는 React.createElement(…) 또는 JSX의 태그 문법(ex. )을 이용해 만들 수 있습니다.

좋은 가독성을 위해서는 JSX를 사용하는 것이 좋습니다.

// JSX를 사용한 경우
<button className="btn-gold">
  <strong>OK!</strong>
</button>

// createElement로 React Element를 만든 경우
React.createElement(
  "button",
  { className: "btn-gold" },
  React.createElement("strong", null, "OK!")
);

// 생성된 React Element
{
  type: 'button',
  props: {
    className: 'btn-gold',
    children: {
      type: 'strong',
      props: {
        children: 'OK!'
      }
    }
  }
}

---

DOM Element

React Element가 실제로 렌더링된 형태로 type이 태그 이름에 해당하는 문자열인 경우(소문자로 시작)를 말합니다.

해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 속성들을 표현합니다.

React가 실제로 화면에 렌더링 하는 대상에 해당됩니다.

<button class="btn-gold">
  <strong>OK!</strong>
</button>

---

React Element VS DOM Element

DOM Element는 HTML 요소를 의미하며 실제 브라우저 DOM에 존재하는 Element입니다.

React Element는 Virtual DOM에 존재하는 Element입니다.

---

불변성 immutable

Element 생성 후에는 children이나 attributes를 변경할 수 없습니다.

가상 DOM은 화면에 새로운 내용을 보여주기 위해서, 가상 DOM의 변경된 부분(State Change)을 계산(Compute Diff)하고 해당 부분을 재렌더링(Re-rendering) 합니다.

변경된 부분을 반영하기 위해서는, Element는 불변성을 가지고 있기 때문에 해당 Element를 제거하고 새로운 Element를 만들어 대체합니다.

---

Element 렌더링하기

// Root DOM Node
<div id="root"></div>

위 코드는 모든 React App에 들어가는 코드이며, div 태그는 Root DOM Node입니다.

React로 만들어진 모든 웹 사이트는 하나의 Root DOM Node를 갖습니다.

const element = <h1>Hello, React</h1>;
ReactDOM.render(element, document.getElementById("root"));

Root div에 실제 React Element를 렌더링하기 위해선 Element를 생성하고, 생성된 Element를 Root div에 렌더링합니다.

렌더링을 할 때에는 ‘ReactDOM’의 render() 함수를 이용합니다.

render 함수는 첫번째 파라미터인 React element(Virtual DOM)를 두번째 파라미터인 DOM element(실제 브라우저의 DOM)에 렌더링합니다.

---

Element 업데이트

Element는 위에서 말했듯이 한번 생성하면 변경할 수 없기 떄문에 새로운 Element를 생성해 대체합니다.

// clock.jsx
function tick() {
  const element = (
    <div>
      <h1>Hello, React</h1>
      <h2>현재 시간 현재 시간: {new Date().toLocaleTimeString()}</h2>
    </div>
  );

  ReactDOM.render(element, document.getElementById("root"));
}

setInterval(tick, 1000);