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

body {
padding: 20px;
}

import React from 'https://esm.sh/react@18.2.0';
import ReactDOM from 'https://esm.sh/react-dom@18.2.0';

const Input = ({ placeholder }) => {
  const [value, setValue] = React.useState('');
  return (
    <>
      <input
        value={value}
        placeholder={placeholder}
        onChange={e => setValue(e.target.value)}
        style={{ marginBottom: '10px' }}
      />
      <div>상태 값: {value}</div>
      <div>
        DOM 노드:{' '}
        <code>{`type: Input, props: { placeholder: '${placeholder}', .. }, ..`}</code>
      </div>
    </>
  );
};

const App = () => {
  const [state, setState] = React.useState(false);
  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        * 같은 타입의 컴포넌트는 상태가 유지되고 props만 업데이트됩니다.
      </div>
      <div style={{ marginBottom: '10px' }}>
        * 상태값을 입력하고 DOM트리를 업데이트해 보세요.
      </div>
      <button
        onClick={() => setState(!state)}
        style={{ cursor: 'pointer', marginBottom: '10px' }}
      >
        DOM트리 업데이트하기
      </button>
      <div>
        {state ? (
          <Input placeholder="안녕하세요" />
        ) : (
          <Input placeholder="hello" />
        )}
      </div>
    </div>
  );
};

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