React.createElement

인자

React.createElement(argument1, argument2, argument3);

argument1 : Type // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
argument2 : [props] // 리액트 컴포넌트에 넣어주는 데이터 객체
argument3 : [...children] // 자식으로 넣어주는 요소들

사용

사실 알고 보면, 컴포넌트와 일반 태그들도 React.createElement 로 만들어줍니다.

1. 태그 이름 문자열 type

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

의미 : createElement로 Type이 h1인, 데이터는 주입하지 않는, 자식으로 'type 이 "태그 이름 문자열" 입니다.' 문자열이 들어가는 ReactElement를 만듭니다.

2. 리액트 컴포넌트 type

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

ReactDOM.render(
  ReactDOM.createElement(Component, null, null), document.querySelector('#root')
);
// 렌더 결과 : <Component></Component> -> <Component/> -> <p>type 이 React 컴포넌트 입니다.<p>

3. React.Fragment

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

React.Fragment 사용하는 이유

1. React.Fragment 가 없었다면 태그를 넣으려면 반드시 상위 태그를 같이 삽입했어야 했습니다. React.Fragment를 사용함으로써 해당태그에 바로 자식 태그를 넣을 수 있습니다.

2. 위의 결과를 이용하면, 예를 들어 자식 태그를 여러개 넣는 경우,

React.createElement(
    React.Fragment,
    null,
    `type 이 "React Fragment" 입니다.`,
    `type 이 "React Fragment" 입니다.`,
    `type 이 "React Fragment" 입니다.`
  ),

[children] 부분에는 여러 요소를 연달아 넣을 수 있습니다.
나중에 root인 div 밑에 바로 배열처럼 요소를 넣고 싶다는 니즈가 나중에 생길때, React.Fragment를 사용합니다.

React.createElement 의 한계

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

<div>
  <div>
    <h1>주제</h1>
    <ul>
      <li>React</li>
      <li>Vue</li>
    </ul>
  </div>
</div>
// 위 html 구조를 render를 한다면...

위 html 구조를 render를 한다면...

매우 복잡하여 코딩하기 힘들고, 가독성도 떨어집니다.
이런 문제를 해결하기 위해 JSX가 사용됩니다.