<div id="root"></div>

body {
  margin: 20px;}

import React from 'https://esm.sh/react@18.2.0';
import ReactDOM from 'https://esm.sh/react-dom@18.2.0';
const Component = () => {
  const [inputValue, setInputValue] = React.useState('');
  return (
    <div>
      <input
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
        placeholder="상태값을 업데이트해 보세요"
        style={{ width:'200px',marginBottom: '10px' }}
      />

      <div>상태값 : {inputValue}</div>
    </div>
  );
};
const App = () => {
  const [state, setState] = React.useState(true);
  return (
    <>
<div style={{marginBottom:'10px'}}>* DOM 요소의 타입이 다르면 재조정 과정에서 상태는 파괴됩니다.</div>
<div style={{marginBottom:'10px'}}>* 상태값을 입력하고 DOM트리를 업데이트해 보세요.</div>
      <button
        onClick={() => setState(!state)}
        style={{ marginBottom: '10px', cursor: 'pointer' }}
      >
        DOM트리 업데이트 하기
      </button>
      {state ? (
        <article>
          <Component />
          <div>
            DOM 노드 : <code> type : 'article', props: .., ..</code>
          </div>
        </article>
      ) : (
        <section>
          <Component />
          <div>
            DOM 노드 : <code> type : 'section', props: .., ..</code>
          </div>
        </section>
      )}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));