[React] React.createElement 컴포넌트

📌 createElement

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

 

📌 태그 이름 문자열 type

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

 

📌 리액트 컴포넌트 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")
);

 

📌 React.Fragment

또 하나의 태그 없이 여러 개의 요소를 바로 넣을 수 있다.

ReactDOM.render(
  React.createElement(
    React.Fragment,
    null,
    `type이 "React Fragment" 입니다.`,
    `type이 "React Fragment" 입니다.`,
    `type이 "React Fragment" 입니다.`
  ),
  document.querySelector("#root")
);

 

📌 복잡한 리액트 엘리먼트 모임

createElement를 사용하게 되면 태그가 복잡해졌을 때 한계가 있지만, JSX를 통해 극복한다.

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")
);