Hooks 이전

• 컴포넌트 내부에 상태가 있다면?
  • class
• 컴포넌트 내부에 상태가 없다면?
  • 라이프 사이클을 사용해야 한다면?
    • class
  • 라이프 사이클에 관계 없다면?
    • function

Hooks 이후

• class
• function

Class 컴포넌트

import React from 'react';

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

// 사용
<ClassComponent />

// 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></Component> => <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" 입니다.`,
    `type 이 "React Fragment" 입니다.`,
    `type 이 "React Fragment" 입니다.`
  ),
  document.querySelector('#root')
)