[React] Elements

 

1. Elements

엘리먼트란 리액트 앱을 구성하는 가장 작은 블록들이다.

엘리먼트의 형태는 다음과 같다.

createElement를 적용하면 위와 같이 변환되는 것이다.

리액트 엘리먼트는 실제로 우리 눈에 보이는 것을 기술한다.

 

또한 돔 엘리먼트와는 다르다. 돔 엘리먼트는 가상 돔의 엘리먼트를 의미한다.

 

 

2. Elements 특징

 

1) 불변성

한 번 생성된 엘리먼트는 변하지 않는다. 즉 엘리먼트 생성 후에는 attributes나 children을 바꿀 수 없다.

마치 붕어빵과 같다. 구워진 붕어빵 속은 바꿀 수 없다.

 

그렇다면 화면에 변경된 엘리먼트를 보여주기 위해선 어떻게 해야할까?

기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성하면 된다.

새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 하는 것이다.

 

 

3. Elements 렌더링

위는 root DOM node이다. div 안에 리액트 엘리먼트들이 렌더링된다.

이 div에 있는 모든 것이 root DOM에 의해 관리된다.

 

리액트로 만들어진 모든 웹 사이트들은 단 하나의 root DOM node를 가지게 된다.

반면 기존에 있던 웹 사이트에 추가적으로 리액트를 연동하게 되면 여러 개의 root DOM node를 가질 수도 있다.

 

만들어진 자바스크립트 객체 즉 엘리먼트를 ReactDOM.render를 이용해 root DOM node에 렌더링한다.

 

리액트 엘리먼트와 돔 엘리먼트는 다르다!

리액트 엘리먼트는 버츄얼 돔에 존재하는 것이고, 돔 엘리먼트는 실제 브라우저 돔에 존재하는 것이다.

결국 리액트 엘리먼트가 렌더링되는 과정은 버츄얼 돔에서 실제 돔으로 이동하는 과정이라고 할 수 있다.

 

 

 

4. 렌더링된 Elements 업데이트하기

내부적으로 tick 함수가 호출될 때마다 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해서 바꿔치기 하는 식으로 이뤄진다.

 

 

 

5. 시계 만들기

 

[Clock.jsx]

import React from "react";

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

export default Clock;

 

[index.js]

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

import Clock from "./chapter_04/Clock";

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

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


reportWebVitals();

18버전 이상은 React.render가 아닌 root.render로 해야 화면이 뜬다.

갈아 끼워지는 리액트엘리먼트!

 

 

출처 : https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[무료] 처음 만난 리액트(React) - 인프런 | 강의