React DOM Element, ComponentElement

Element

• type과 props를 가지는 불변 객체입니다.
  *여기서 불변이란: props가 가진 state의 값은 변할수 있지만 type과 props는 생성된 후 변경될 수 없음
• type의 종류에 따라 DOM 엘리먼트, 컴포넌트 엘리먼트로 나뉘게 됩니다.

DOM Element

// HTML
<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

// Element
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      children: 'OK!'
    }
  }
}

• 엘리먼트의 type이 태그 이름에 해당하는 문자열(소문자로 시작)입니다.
• type의 이름에 해당하는 DOM 노드를 표현합니다.(ex: <div>, <button>, <span>)
• props 정보는 노드의 어트리뷰트들을 표현합니다.
• React가 실제로 화면에 렌더링 하는 대상입니다.

Component Element

// JSX
<OkButton color="blue">OK!</OkButton>

// Element
{
  type: OkButton,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

• 엘리먼트의 type이 컴포넌트(클래스/함수) 이름(대문자로 시작)입니다.
• 사용자가 직접 정의한 컴포넌트를 표현합니다.
• props 정보는 컴포넌트에 전달되는 데이터 & 렌더링 할 엘리먼트 트리를 반환합니다.
  *엘리먼트 트리는 DOM Element와 Component Element들로 이루어집니다.