[React] React.createElement로 컴포넌트 만들기

createElement

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

1. 태그 이름 문자열 type

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

2. 리액트 컴포넌트 type

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

ReactDOM.render(
  React.createElement(Component, null, null),
  document.querySelector("#root")
);

3. React.Fragment

// 또 하나의 태그 없이 여러개의 요소를 바로 넣을 수 있다.
ReactDOM.render(
  React.createElement(
    React.Fragment,
    null,
    `type이 "React Fragment" 입니다.`,
    `type이 "React Fragment" 입니다.`,
    `type이 "React Fragment" 입니다.`
  ),
  document.querySelector("#root")
);

4. 복잡한 리액트 엘리먼트 모임

// 리액트의 한계 => JSX로 극복
// <div><div><h1>주제</h1><ul><li>React</li><li>Vue</li></ul></div></div>
ReactDOM.render(
  React.createElement(
    "div",
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "주제"),
      React.createElement(
        "ul",
        null,
        React.createElement("li", null, "React"),
        React.createElement("li", null, "Vue")
      )
    )
  ),
  document.querySelector("#root")
);