React - Component

• Class Component

// 정의
class ClassComponent extends React.Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

// 사용
ReactDOM.render(<ClassComponent />, document.querySelector('#root'));

---

• Function Component

// 정의 1
function FunctionComponent() {
  return <h1>Hello React</h1>;
}

// 정의 2
const FunctionComponent = () => <h1>Hello React</h1>;

// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector('#root'));

---

• React.createElement

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

// 1. 태그 이름 문자열 type
ReactDOM.render(
  React.createElement('h1', null, '태그 이름 문자열 type'),
  document.querySelector('#root')
);

// 2. 리액트 컴포넌트 type
const Component = () => {
  return React.createElement('p', null, '리액트 컴포넌트 type');
};

// ReactDOM.render(React.createElement(Component, null, null), document.querySelector('#root'));
ReactDOM.render(<Component />, document.querySelector('#root'));

// 3. React.Fragment
ReactDOM.render(
  React.createElement(React.Fragment, null, 'React Fragment'),
  document.querySelector('#root')
);

// 4. 복잡한 리액트 엘리먼트 모임
ReactDOM.render(
  React.createElement(
    'div',
    null,
    React.createElement(
      'div',
      null,
      React.createElement('h1', null, 'JS Library'),
      React.createElement(
        'ul',
        null,
        React.createElement('li', null, 'React'),
        React.createElement('li', null, 'Vue')
      )
    )
  ),
  document.querySelector('#root')
);