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

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

 

렌더링 엘리먼트.

크리에이트 엘리먼트.

 

엘리먼트는 무엇이며, 어떤 역할인지.

Elements

 

어떤 물체를 구성하는 성분 (요소, 성분)

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

 

Dom 에서 사용하는 개념

 

리액트 엘리먼트와 돔 엘리먼트의 차이.

리액트 앨리먼트는 돔 엘리먼트의 가상 엘리먼트

돔 앨리먼트가 더 무겁다.

 

화면에 나타나는 내용을 기술하는 자바스크립트 객체

Descriptor => Dom 엘리먼트

 

Elements 는 화면에서 보이는 것들을 기술한다.

우리는 Elements 를 토대로 돔 엘리먼트가 만들어진다.

 

Elements 의 생김새

 

리액트 Elements는 자바스크립트 객체 형태로 존재한다.

일반적인 자바스크립트 객체이며 불변성을 가지고 있다.

 

{
	type: 'button',
    props: {
    	className: 'bg-green',
        children: {
        	type: 'b',
            props: {
            	children: 'Hello, element!'
            }
         }
     }
}

 

버튼을 나타내기 위한 element. (자바스크립트 객체 형태)

props 는 속성.

 

<button class = 'bg-green'>
	<b>
    	Hello, element!
    </b>
</button>

 

다음과 같은 Dom element 가 만들어진다.

 

React.createElement(
    type,
    [props],
    [...children]
)

 

function Button(props) {
	return (
    	<button className={`bg-${props.color}`}>
    		<b>
            	{props.children}
            </b>
        </button>
    )
}

function ConfirmDialog(props) {
	return (
    	<div>
        	<p> 내용을 확인하셨으면 확인 버튼을 눌러주세요. </p>
            <Button color='green'> 확인 </Button>
        <div>
    )
}

 

{
	type: 'div',
    props: {
    	children: [
        	{
            	type: 'p',
                props: {
                	children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
            	type: Button,
                props: {
                	color: 'green',
                    children: '확인'
                }
            }
        ]
     }
 }

 

이처럼 컴포넌트 렌더링을 위해서 모든 컴포넌트가 크리에이트 엘리먼트 함수를 통해 엘리먼트로 변환된다는 사실을 기억하자.

 

우리 눈에 실제로 보이는 것들을 기록하는 것. 엘리먼트.

 

Elements 의 특징

 

불변성. (immutable)

Elements 생성 후에는 children 이나 attributes 를 바꿀 수 없다.

 

컴포넌트 = 붕어빵 틀, 엘리먼트 = 붕어빵 (변경 불가능)

 

변경해야 할 때에는 새로운 엘리먼트를 생성하여 바꿔치기 하면 된다.

 

Virtual DOM 을 사용.

 

화면이 얼마나 자주 갱신되는지가 성능에 영향을 준다.

 

Elements 렌더링하기

 

<div id="root"><div>

 

Root DOM Node.

필수!!

 

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

 

엘리먼트를 생성하고 렌더링하는 코드.

리액트 엘리먼트(Virtual)와 돔 엘리먼트(브라우저)는 다른 개념.

 

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

 

불변성.

 

function tick() {
	const element = (
    	<div>
        	<h1> 안녕, 리액트! </h1>
            <h2> 현재 시간: {new Date().toLocaleTimeString()} </h2>
        <div>
    );
    
    ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

 

이 코드의 실행 결과는 매 초 화면에 시간이 나오게 될 것이다.

새로운 element 를 초마다 생성해서 바꿔치기 하는 것이다.

 

실습 : 시계 만들기

 

import React from "react";

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

export default Clock;

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
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);