element(엘리먼트)

element(엘리먼트)

 

             - 엘리먼트는 React 앱의 가장 작은 단위 이다. 

             - 엘리먼트는 화면에 표시할 내용을 기술 한다.

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

 

       - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다.

       - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.

 

 

DOM에 엘리먼트 렌더링 하기

   

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

 - HTML 파일 어딘가에 <div>가 있다고 가정

 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. 

 - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. 

 - React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다. 

 - React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot() 에 전달 한다.

 - 그 후에 React 엘리먼트를 root.render()에 전달한다. 

 

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


const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <h1>Hello, world</h1>;
root.render(element);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

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

 

React 엘리먼트는 불변객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.

 

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


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

// 함수 안에 root.render를 선언해주고 
// setInterval 함수로 1초마다 root.render를 계속해서 호출 해주는 방법으로 업데이트가 가능하다
setInterval(tick, 1000);