React 컴포넌트 작성법

const FunctionalComponent = () => (
  <div>
    <h1>함수형 컴포넌트</h1>
    <h2>Time : {new Date().toLocaleTimeString()}</h2>
  </div>
);

class StatelessComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>클래스형 컴포넌트, 상태가 없는 컴포넌트</h1>
        <h2>Time : {new Date().toLocaleTimeString()}</h2>
      </div>
    );
  }
}


class StatefulComponent extends React.Component {
  //constructor 생성자
  constructor(props) {
    super(props);
    this.state = {
      now: new Date().toLocaleTimeString()
    };
  }
  render() {
    return (
      <div>
        <h1>클래스형 컴포넌트, 상태가 있는 컴포넌트</h1>
        <h2>Time : {this.state.now}</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <FunctionalComponent />
    <StatelessComponent />
    <StatefulComponent />
  </div>
  , document.getElementById('root'),
);