엘리먼트 렌더링 알아보기 전에 알아야할 개념

virtual DOM

• React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
  (리액트 공식문서 말인데 솔직히 뭔말인지 개어렵다)

  즉, 변화가 생기면 virtual DOM에 먼저 저장을 하고 DOM과 virtual DOM을 비교하여 그 최종적으로 변화된 결과를 DOM에 반영하는 것(이게 DOM과 동기화한다는 의미이다)

virtual DOM에 변화가 반영된 후 DOM에 최종 변경 사항이 반영되는 과정

이미지 출처: https://intrepidgeeks.com/tutorial/why-understand-virtual-dom

virtual DOM 관련 읽어보면 좋은 글

(virtual DOM과 리액트의 관계에 대해 잘 나와있다고 생각)

https://velog.io/@woohm402/virtual-dom-and-react

렌더링(rendering)

• state 변경이 있을 때 어플리케이션의 일부 구성 요소에서 발생되는 과정이다.
• 쉽게 말하면 state와 prop의 변경이 있을 경우 그 변경 사항을 반영하기 위해 발생하는(변화된 결과를 반영하여 그려주는) 과정이다.
  
  이미지 출처: http://www.tutorialspoint.com/reactjs/images/workflow_jsx.jpg

렌더링 과정 이해에 도움되는 글 1
렌더링 과정 이해에 도움되는 글 2

---

엘리먼트(element)

• 화면에 표시할 내용
• 리액트 엘리먼트는 일반 객체이다

엘리먼트 DOM에 렌더링하기

• 엘리먼트를 렌더링하기 위해서는 Root DOM Node를 만들어 넣어야한다.
• 리액트로 구현된 애플리케이션은 일반적으로 하나의 root노드를 가지고 있다
  (기존 앱에 합치는 등 경우에 따라서는 여러 개일 수 있음)

//1. ReactDOM.createRoot로 먼저 root노드 생성
const root = ReactDOM.createRoot(
  document.getElementById('root')
);

//2. root노드에 넣을 엘리먼트 만들기
const element = <h1>Hello, world</h1>;

//3. root 노드에 엘리먼트를 넣어 렌더링하는 법
root.render(element);

렌더링 과정 잘 설명한 글

렌더링 된 엘리먼트 업데이트 하기

1. react element는 불변 객체이므로 변경된 내용으로 렌더링 하고 싶을 경우 새로운 객체를 만들어서 root.render(새로운엘리먼트객체)해야한다.

하지만 State를 활용하면 변경된 부분만 업데이트가 가능하다.

state는 투비컨티뉴...