엘리먼트 렌더링 | React Docs

엘리먼트

• React 앱의 가장 작은 단위
• 엘리먼트는 화면에 표시할 내용을 기술

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

• 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object) 이며 쉽게 생성할 수 있다.
• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

DOM에 엘리먼트 렌더링하기

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리
⇒ "루트(root)" DOM 노드라고 부른다.

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다.
React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.

React 엘리먼트를 렌더링 하기 위해
1. DOM 엘리먼트를 ReactDOM.createRoot()에 전달
2. React 엘리먼트를 root.render()에 전달

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

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

root.render(element);

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

• React 엘리먼트는 *불변객체
• 엘리먼트를 생성한 이후 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
  ⇒ 엘리먼트는 하나의 프레임과 같이 특정 시점의 UI를 보여준다.

*불변객체 : 객체 지향 프로그래밍에 있어서 불변객체는 생성 후 그 상태를 바꿀 수 없는 객체를 의미

지금까지의 내용에서 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의 콜백을 이용해 초마다 root.render()를 호출
setInterval(tick, 1000);

변경된 부분만 업데이트하기

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

• 매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트