createElement

React.createElement (type, [props], [...children]) : html 하위 태그 요소를 생성하는 메소드

createElement의 매개변수 "type", "[props]", "[...childeren]"

type : 태그이름 or 함수, 클래스, Frament

type인수는 유효한 React 구성 요소 유형이어야 한다.
ex) 태그 이름 문자열(예: 'div'또는 'span'), React 구성 요소(함수, 클래스 또는 Fragment와 같은 특수 구성 요소)

//1. 태그 이름 문자열 type
	ReactDOM.createRoot(
    	document.querySelector('#root')
    	).render(React.createElement('h1', null, `type 이 "태그 이름 문자열" 입니다.`))

// 2. 리액트 컴포넌트 type
    const Component = () => {
      return React.createElement('p', null, `type이 "React 컴포넌트" 입니다.`)
    }

    // <Component></Component> => <Component /> => <p>type이 "React 컴포넌트" 입니다.</p>
    ReactDOM.createRoot(
      document.querySelector('#root')
    ).render(React.createElement(Component,null,null))

//    3. React.Fragment
  ReactDOM.createRoot(
    document.querySelector('#root')
  ).render(React.createElement(
    React.Fragment, // 하위 태그 없이 해당 태그에 바로 요소 삽입
    null,
    `type 이 "React Fragment" 입니다.`
    `type 이 "React Fragment" 입니다.`
    `type 이 "React Fragment" 입니다.`
  ))

props : null or 객체

props 인수는 null or 객체
null을 전달 하면 빈 개체와 동일하게 처리.
propsReact는 전달한 것과 일치하는 소품으로 요소를 생성합니다 . ref및 keyfrom 귀하의 props개체는 특별하며 반환 된 에서 and 로 사용할 수 없습니다 . 및 로 사용할 수 있습니다 .element.props.refelement.props.keyelementelement.refelement.key

optional ...children : 0개 이상의 자식 노드(React 요소, 문자열, 숫자, 포털 , 빈 노드( null, undefined, true및 false) 및 React 노드 배열을 포함한 모든 React 노드가 될 수 있습니다 .