React.createElement

이제부터 컴포넌트를 실제로 만들어보겠습니다. React.createElement를 이용하여 컴포넌트를 만들어보는 것이 React와 JSX에 대한 깊은 이해를 가질 수 있도록 돕기 때문에 이를 배워보도록 합니다.

기본 문법

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

1. 태그 이름 문자열 type

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

2. 리액트 컴포넌트 type

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

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

3. React.Fragment

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

React.Fragment는 위의 두 예들과 달리 별도의 다른 태그가 없이 root 요소에 내용이 입력된 것을 확인할 수 있습니다.

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

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

이처럼 엘리먼트는 다른 예들처럼 간단하지가 않습니다. 위와 같은 화면 또한, 복잡하지 않고 매우 간단한 것임에도 불구하고 React.createElement를 사용히하여 컴포넌트를 만드는 것은 매우 복잡한 작업임을 알 수 있습니다.

순수하게 JavaScript 문법만으로 React를 사용하는 것은 위와 같이 매우 복잡하기 마련입니다. 다음 시간에는 React를 간단하게 사용할 수 있는 방법에 대해 알아보도록 하겠습니다.