React가 하는 일 (리액트의 핵심 모듈 2개로 리액트가 하는 일 알아보기)

// React Component 를 => HTMLElement 에 연결한다.
import ReactDom from 'react-dom';

// React Component 를 만든다.
import React from 'react';

// ReactDom 은 마치 main과 같다. app의 시작함수이다.
ReactDom.render(
	<MyComponent name="malza" />,
	docunemt.getElementById('hello-example')
);

Component 를 만든다! 하면 거의 무조건 import React from 'react';
해 가지고 무언가를 하게 된다.

<style>
    * {
      padding: 0;
      margin: 0;
      border: 0;
    }
    #root p {
      color: white;
      font-size: 20px;
      background-color: rosybrown;
      text-align: center;
      width: 200px;
    }
    #btn_plus {
      background-color: royalblue;
      border: 2px solid black;
      font-size: 15px;
      width: 200px;
    }
  </style>

<body>
  <div id="root"></div>
  <button id="btn_plus">+</button>
  <script>
    // const component = {
    //   message: 'init',
    //   count: 0,
    //   render() {
    //     return `<p>${this.message} : ${this.count}</p>`;
    //   }
    // };

    // function render(rootElement, component) {
    //   rootElement.innerHTML = component.render();
    // }

    // render(document.querySelector('#root'), component);

    // document.querySelector('#btn_plus').addEventListener('click', () => {
    //   component.message = 'update';
    //   component.count = component.count + 1;
    //   render(document.querySelector('#root'), component);
    // })
    
    const Component = props => {
      return React.createElement('p', null, `${props.message} : ${props.count}`)
    }
    ReactDOM.render(React.createElement(Component, {message: 'init', count: 0}, null),
    document.querySelector('#root'));

    document.querySelector('#btn_plus').addEventListener('click', () => {
    ReactDOM.render(React.createElement(Component, {message: 'update', count: 10}, null),
    document.querySelector('#root'));
    })
  </script>
</body>

React.createElement 는 실제 Dom 이 아니라 virtual Dom 을 가지고 있다가, 실제 Dom 에 반영 해 
준다.