정의

• 어떤 물체를 구성하는 성분
• Elements are the smallest building blocks of React apps.
• 리액트 앱을 구성하는 가장 작은 블록들
• DOM(웹의 모든 정보를 가지고 있는 객체)에서 사용하는 용어

React Elements / DOM Elements

• Descriptor : 화면에 나타나는 내용을 기술하는 자바스크립트 객체
  • DOM과의 통일성을 위해 Elements로 호칭을 바꿈

• React Elements : 화면에 보이는 것을 기술 ex) const element =

  Hello, world

  • 자바스크립트 객체 형태로 존재
  • 마음대로 변경할 수 없는 불변성

ex)
    {
        type : ‘button’,	// 태그이름 
        props : {		// 속성	
            className : ‘bg-green’, 	
            children: {
                type : ‘b’,
                props: {
                    children : ‘Hello, element!’
                }
            }
        }
    }

랜더링 후

ex)	
  <button class=‘bg-green’>
      <b>
          Hello, element!
      </b>
  </button>

엘리멘트 타입이 문자열이 아닌 경우

• 리액트의 컴포넌트를 나타낸 것
• 일반적인 자바스크립트 객체

ex) 
	{
		type : Button, // 리액트 컴포넌트의 이름
        props : {
        	color : ‘green’,
        	children : ‘Hello, element!’
        }
   	}

createElement가 만들어 준다

ex)
React.createElement(
    type, 	// html태그가 문자열로 ,혹은 리액트 컴포넌트가 들어간다 -> 최종적으로 html태그로 변환된다 
            //하나의 컴포넌트, 여러 자식 컴포넌트, 자식 컴포넌트를 분해해 보면 html태그가 나온다
    [props],	//속성(class, style), attribute보다 상위개념
    […children] // 자식 엘리먼트
)