※ 공식문서를 읽고 정리한 글입니다.

Element?

const element = <h1>Hello, world</h1>;

• 화면에 표시할 내용을 기술하는 리액트 앱의 가장 작은 단위
• Element는 일반적인 객체이며, React DOM에 의해 엘리먼트와 일치하게 DOM을 업데이트함

DOM에 엘리먼트를 렌더링하는 법

// <div id="root"></div> 이 html 어딘가에 있다 가정
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

• React 애플리케이션에는 보통 하나의 Root DOM을 가지고 있음
• ReactDOM.creatRoot()에 DOM 엘리먼트를 전달해 React root를 만들고, root에 렌더링하고자 하는 엘리멘트를 전달함
• 리액트 엘리먼트는 불변객체로 엘리먼트가 일단 생성되면 엘리먼트의 자식이나 속성 등을 변경할 수 없음
  엘리먼트가 생성된 시점의 UI를 보여줌

렌더링 된 엘리먼트의 업데이트

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

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

setInterval(tick, 1000);

• 이미 생성된 엘리멘트를 업데이트하기 위해서는 새로운 엘리멘트를 생성해 이를 다시 랜더링 해야함
• 예문에서는 setInterval 콜백이 root.render()를 호출해 시간을 갱신해주고 있음
• React DOM은 새로 생성된 엘리멘트와 기존에 존재하는 엘리만트를 비교해 DOM에서 변화되는 부분만을 업데이트해줌