react cdn 개념이해

//기존 방식

  const component = {
    message : "init",
    count : 0,
    render(){
      return `<p>${this.message} : ${this.count}</p>`
    },
  };
  //rootElement = dom
  function render(rootElement, component){
    rootElement.innerHTML = component.render();
  }

  //초기화
  //값이 바뀔때마다 앞뒤로 render해줘야함
  render(document.querySelector("#root"),component);
  document.querySelector("#btn-plus").addEventListener("click",function(){
    component.message = "update";
    component.count = component.count +1 ;

    render(document.querySelector("#root"),component);
  });

//개념의 이해

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

//  console.log(React);
//  console.log(ReactDOM);
//ReactDOM.render(리액트컴퍼넌트, 리액트 그려질곳)

//reactElement는 실제 element가 아니라 react규정상
//만들어진 element임으로 여기서 react라이브러리가 사용된다
//React.cerateElement(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")
);
});