[react] 엘리먼트 렌더링

const root = ReactDOM.createRoot(document.getElementById('root'));

const tick = () => {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
      <App/>
    </div>
  );
  root.render(element);
};

setInterval(tick, 1000)

Vue와 다르게 react의 보간법에선 Object를 직접 선언할 수 없다는 차이가 있었다.
JSX에서는 문자열, 숫자, 배열 등과 같은 값들을 표현할 수 있었다.

또한 tick 함수를 setInterval을 이용하여 1초마다 재실행해주는데
element변수에 있는 JSX안에 new Date()를 매번 재연산해줘야 하기때문에 tick함수 내부에 element를 선언해줘야했다.

react에도 Vue의 data, computed, ref처럼 변경되는 변수값에 따라 자동갱신되는 방법이 있을 것이고,
초기 예시라 아직은 직접 렌더링하는 것 같다.