🌌 React 입문 Ⅳ - Element

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

Element란?

• Chrome 개발자 도구를 통해 확인할 수 있는 Elements는 DOM Element를 의미한다.
• DOM Element란 브라우저에서 실제로 렌더링 된 HTML 요소이다. 
• React Element는 화면에 나타나는 내용을 기술한 Javascript 객체를 일컫는다.
• 즉 DOM에 직접 표시되지 않는다.

/* JSON 형태
{
  type: 'button',
  props: {
    className: 'bg-green',
    children: {
      type: 'b',
      props: {
        children: '테스트용 텍스트 입니다!'
      } 
    }
  }
}
*/

// 리액트 엘리먼트를 생성하는 JSX 문법
<button className="bg-green">
  <b>
    테스트용 텍스트 입니다!
  </b>
</button>

• JSON 형태로 주석 처리된 부분이 React Element이다.
• 만들어진 React Element는 DOM에 표시되지 않은 상태이다.
• JSX 문법도 React Element를 만들어 낸다.
• Element의 type에는 HTML 태그명이 문자열로 들어갈 수 있지만 React의 Component가 들어갈 수도 있다.
• 하나의 Component는 여러 개의 자식 Component를 포함할 수 있는데, 자식 Component를 쭉 분해하다 보면 결국 HTML 태그가 나올 것이다.
• Element의 props는 부모 Component에서 자식 Component로 전달되는 객체를 의미한다.
• Element는 불변성을 가지고 있기 때문에 한 번 생성된 Element는 변하지 않는다.

Element 렌더링

• 데이터가 갱신 되는 시점에 Virtual DOM은 전체 UI를 렌더링 한다.
• 이때 가져온 트리의 복사본과 기존 트리를 비교하여 바뀐 부분만 실제 UI에 반영하는 것이다.
• 정확히는 바뀐 노드의 자식 노드까지 UI에 반영된다.
• 불변성을 갖고 있다는 것은 Element를 수정하는 게 아니라 교체해 버린다는 것을 의미한다.
• 화면이 렌더링 되는 횟수는 React 애플리케이션 성능에 큰 영향을 미치는 요소이다.

Root DOM node

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

• 모든 React 애플리케이션에 포함되는 필수적인 코드이다.
• 이 div 태그 안에 React Element들이 실제로 렌더링 되는 것이다.
• 하나의 React 애플리케이션이 여러 개의 Root DOM node를 갖게 될 수도 있다.

React Element 렌더링

const element = <h1>텍스트</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

• render() 함수를 통해 Root DOM node에 React Element를 렌더링 하는 코드이다.

실습

import React from "react";

function Clock() {
	return (
		<div>
			<h1>🕒 현재 시간</h1>
			<h2>✅ {new Date().toLocaleTimeString()}</h2>
		</div>
	);
}

export default Clock;

• 단순히 현재 시간을 보여주는 Component이다.
• 이 Component 만으로는 화면이 단 한 번밖에 갱신 되지 않을 것이다. 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Team from './Team';

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(() => {
	root.render(
		<React.StrictMode>
			<Clock/>
		</React.StrictMode>
	);
}, 1000);

reportWebVitals();

• setInterval() 함수를 통해 일정 시간마다 Clock Component를 렌더링 한다.
• new Date().toLocaleTimeString() 값이 1초마다 갱신 되면서 
• Clock Component의 속성 값이 계속 바뀌게 되는데, 이때 React가 변경을 감지하고 1초마다 렌더링을 하는 것이다. 

회고

• React는 변경사항이 존재하는 Component만 부분적으로 렌더링 한다는 사실을 알 수 있었다.