[React] React.createElement

React.createElementReact의 핵심 함수로, 새로운 React 엘리먼트를 생성하고 반환합니다.

JSX는 이 함수로 컴파일됩니다.

대부분의 개발자는 JSX()를 사용하지만 ,

동적 컴포넌트 생성이나 JSX를 사용하지 않을 때 유용하게 <div>Hello</div>사용할 수 있습니다 .

React.createElement(
  type,
  [props],
  [...children]
)

• type: 문자열(예: 'div') 또는 React 구성 요소.
• props: 요소에 설정할 속성을 포함하는 객체입니다.
• children: 자식은 문자열, React 요소 또는 이들의 배열일 수 있으며, 개수에 제한이 없습니다.

예 1: 기본 사용법

jsx

const element = <h1>Hello, world!</h1>;

다음과 동일합니다 React.createElement:

js

const element = React.createElement('h1', null, 'Hello, world!');

 

 

 

jsx

const element = <button className="btn">Click me</button>;

다음과 동일합니다 React.createElement:

js

 

const element = React.createElement(
  'button',
  { className: 'btn' },
  'Click me'
);

 

 

jsx

const element = (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

다음과 동일합니다 React.createElement:

js

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Title'),
  React.createElement('p', null, 'Description')
);