ReactDOM.render / React.createElement(type,[props],[...children])

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">

//  console.log(React);
//  console.log(ReactDOM);

// React.createElement(
//   type, //태그이름 문자열 | 리액트 컴포넌트 | React.Fragment
//   [props], //리액트 컴퍼넌트에 넣어주는 데이터 객체
//   [...children] //자식으로 넣어주는 요소들
// );

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

2.리액트 컴포넌트 type
 const Component = () =>{
   return React.createElement(
     'p',
     null,
     `type이 "react컴퍼넌트입니다"`
     );
 };
 ReactDOM.render(
   //하단은 이렇게 그려진다 <Component></Component> = <Component /> = <p>type이 "태그이름 문자열 입니다</p>
   React.createElement(Component,null,null),
   document.querySelector("#root")
 )

//3.React.Fragment
//다른태그 감싸지 않고 최상위에 넣는 방법
//root 에 바로 배열처럼 넣고 싶은 경우 사용
// ReactDOM.render(
//   React.createElement(
//     React.Fragment,
//     null,
//     `type이 "React Fragment"입니다`,
//     `type이 "React Fragment"입니다`,
//     `type이 "React Fragment"입니다`
//   ),
//   document.querySelector("#root")
// );

//4.복잡한 리액트 엘리먼트 모임을 위해 jsx가 나왔다
</script>