[처음 만난 리액트] section 4. Rendering Elements

 

1. Elements의 정의와 생김새

📌 Elements란?

리액트 앱을 구성하는 가장 작은 블록들

화면에서 보이는 것들을 기술

🔎 React element와 DOM element의 차이

실제 브라우저의 DOM에 존재하는 element가 DOM element

리액트의 virtual DOM에 존재하는 element가 리액트 element

즉 리액트 element는 DOM element의 가상 표현

DOM element는 리액트 element에 비해 많은 정보를 가지고 있어 상대적으로 크고 무겁다

🔎 React element

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

React.createElement 함수 호출 → 자바스크립트 객체 생성 = 리액트 element

리액트는 이 element를 이용해 실제 화면에서 보게 되는 DOM element를 생성

 

📌 Elements의 생김새

리액트 element는 자바스크립트 객체 형태로 존재

컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체

불변성을 가지고 있음

왼) element 의 자바스크립트 객체 오) 랜더링된 element

🔎 createElement 파라미터

type : HTML 태그이름이 문자열로 들어가거나 또 다른 리액트 컴포넌트가 들어감

props : element의 클래스나 스타일 같은 속성

children : 자식 element

 

2. Elements의 특징 및 렌더링하기

📌 React Element의 특징

🔎 불변성(Immutable)

element 생성 후에는 자식이나 속성을 변경할 수 없음

변경된 element를 보여주기 위에선 기존 element를 변경하는 것이 아닌 새로운 element를 생성

 

📌 Elements 렌더링 하기

🔎 Root DOM Node

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

모든 리액트 element들이 렌더링 되는 루트 돔노드

 

🔎 렌더링 과정

const element = <h1>안녕 리액트</h1>;
ReactDOM.render(element, document.getElementById('root'));

element를 생성하고 루트 돔 노드에 렌더링 → ReactDOM.render() 사용

첫 번째 파라미터(리액트 element - virtual DOM에 존재)를 두 번째 파라미터(DOM element)에 렌더링

렌더링 되는 과정은 virtual DOM에서 실제 DOM으로 이동하는 것

 

🔎 렌더링 된 Elements를 업데이트하기

리액트 element의 불변성으로 인해 업데이트하기 위해선 새로 생성해야 함

 

 

3. 시계 만들기

📃 Clock.jsx

import React from 'react';

function Clock(props){
  return(
    <div>
      <h3>안녕 리액트</h3>
      <h5>현재 시간 : {new Date().toLocaleTimeString()}</h5>
    </div>
  );
}

export default Clock;

 

📃 index.js

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

setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

reportWebVitals();

1초마다 Clock 컴포넌트를 렌더링

 

📊 결과