React 공식사이트의 주요개념을 보고 정리한 글 입니다.
( 주의! 중간중간 작성자의 마음의 소리?가 들어갈 수 있습니다.)

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

Note:
널리 알려진 "components"라는 개념과 "elements"가 혼동될 수 있으나
"Elements"는 "Components를 이루는 구성요소" 이다.

태그가 있다고 가정해보자.

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

우리는 이것을 "root" DOM node라고 부를건데, 그 이유는 이 안에서 모든것들이 React DOM에의해 관리될것이기 때문이다.

-> ( "root" DOM node라고 불리는 것 안에서 모든 것들이 관리될 것이기 때문에 이름을 "root"라고 지었나보다...)

React로만 만들어진 어플리케이션은 일반적으로 '단 하나의 root DOM node만을 갖는다'.
만약 기존에 있던 앱에 React를 합치는 것이라면, 아마 필요한 만큼의 고립된 root DOM을 가져야할 것이다.

React element를 렌더링하기 위해선, DOM element를 ReactDOM.creatRoot()에 전달해야하고, 그 다음 root.render()로 React element를 전달해야한다.

const element = <h1>Hello, world</h1>; //React엘리먼트
  
//순서 1) ReactDOM.createRoot()에 DOM 전달하기
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
// 순서 2) root.render()에 React엘리먼트 전달하기
root.render(element);

-> ( 앞서 브라우저의 DOM 엘리먼트와 React의 엘리먼트는 엄연히 다른것이라고 보았다. 위 예제에서 보듯이 ReactDOM.createRoot() 브라우저의 DOM이 전달되어져서 "root"안에서 모든 것을 관리할 수 있게되었다.
그 다음 root.render()에 렌더링할 React 엘리먼트를 전달하여 React엘리먼트를 DOM으로 렌더링하게 된 것이다! )

Updating the Rendered Element (렌더링된 엘리먼트 업뎃하기)

React엘리먼트는 immutable합니다.
한번 엘리먼트를 생성한 뒤엔, 그 자식이나 속성을 변경할 수 없습니다.

지금까지의 지식으로는, UI를 업데이트하는 방법은 새로운 엘리먼트를 만들어 root.render()에 전달하는 것 뿐입니다.

째깍대는 시계 예제를 생각해봅시다. :

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);

위 예시를 보면 1초마다 root.render()를 호출합니다.

Note:
실제론, 대부분의 React앱에선 root.render()를 딱 한번만 호출합니다. 
다음 섹션에서 이러한 코드를 statefult한 컴포넌트로 캡슐화하는지 배워볼 것입니다.

React Only Updates What’s Necessary ( React는 필요할때만 업데이트합니다.)

React는 엘리먼트와 그 자식요소를 이전의 것과 비교하여 필요한 경우에만 업데이트 합니다.

비록 위 예시에서 매초마다 전체 UI 트리를 구성하는 엘리먼트를 생성했음에도 불구하고, text node만 변화하는 것을 볼 수 있습니다.
(React DOM 덕분에 필요한 부분만 업데이트 된 것입니다.)

🙂주절주절 나름의 정리,이해한 것들..

리액트에서 엘리먼트를 렌더링해주기 위해선 ReactDOM이라는 애가 필요하다고한다. ReactDOM으로 하여금 브라우저의 돔을 가져와 연결시키고 그렇게 만들어진 "root"라고 불리는 애로 root.render()에 React 엘리먼트를 인자로 전달해주면 렌더링되는 것이다.

렌더링은 이렇게 했다고 치고,
그렇다면, 엘리먼트를 업데이트 해주는 것은 어떻게 할까?

공식문서의 위 시계 예제를 보면 매초마다 전체 React엘리먼트를 만들어 render를 실행하고 있음에도 실제로는 꼭 바뀌어야하는 부분만 업데이트해주는 것을 gif이미지를 통해 확인할 수 있다.

( 이게 가능한 이유는 리액트는 virtual dom을 이용해서 꼭 바뀌어야 하는 것만 업뎃해주기 때문이라고 어디선가 보긴했었는데 )
어떻게 이게 가능한 것인지 세부적인 내용은 아직 잘 모르겠으나
그래서 React 라이브러리를 사용하는게 아닌가 싶다!
불필요한 것들은 업데이트 하지 않으니까 말이다..

참고
https://reactjs.org/docs/rendering-elements.html (영어)
https://ko.reactjs.org/docs/rendering-elements.html (한국어)