Elements?

• Elelments are the smallest building blocks of React Apps.

• 리엑트 앱을 구성하는 가장 작은 블록들

  • 리엑트 element는 자바 스크립트의 객체 형태로 존재

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

  • ㄴ-> rendering

    <button class='bg-green'>
      <b>
        Hello, element!
      </b>
    </button>

Element 특징

• React Elements are immutable.

• 불변성, Element 생성 후 children이나 attributes를 바꿀 수 없다.

Element 렌더링

• Root DOM Node

• index.html

<div id='root'></div> 

• index.js

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);