Rendering Elements

FrontEnd/React

Rendering Elements

JunGi Jeong 2024. 4. 4. 00:02

Elements란?

Elements are the smallest building blocks of React apps
리액트 앱을 구성하는 가장 작은 블록들

DOM Element	React Element
Browser DOM	Virtual DOM
많은 정보 / 크고 무거움	간략화 / 가벼움

React Elements 생김새

자바스크립트 객체 형태로 존재하며 불변성(Immutable)을 가짐

// 변환 전 React Element
{
    type: 'button',
    props: {
        className: 'bg-green',
        Children: {
            type: 'b',
            props: {
                children: 'Hello element!'
            }
        }
    }
}
// 변환 후 DOM element
<button class='bg-green'>
    <b>
        Hello element!
    </b>
</button>

create element 함수의 동작과정

React.createElement(
    type,	
    /*
    type 인수는 유효한 React 컴포넌트여야 합니다.
    예를 들어 태그 이름 문자열 (예: ‘div’, ‘span’)
    또는 React 컴포넌트(함수, 클래스, Fragment 같은 특수 컴포넌트)가 될 수 있습니다.
    */
    [props],
    /*
    props 인수는 객체 또는 null이어야 합니다.
    null을 전달하면 빈 객체와 동일하게 처리됩니다.
    React는 전달한 props와 일치하는 프로퍼티를 가진 엘리먼트를 생성합니다.
    전달한 props 객체의 ref와 key는 특수하기 때문에 생성한 엘리먼트에서
    element.props.ref 와 element.props.key는 사용할 수 없다는 점에 유의하세요.
    element.ref 또는 element.key로 사용할 수 있습니다.
    */
    [...children]
    /*
    0개 이상의 자식 노드.
    React 엘리먼트, 문자열, 숫자, 포탈, 빈 노드(null, undefined, true, false)
    그리고 React 노드 배열을 포함한 모든 React 노드가 될 수 있습니다.
    */
)

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>
    )
}
// ConfirmDialog 실행 및 Button Component 변환 전
{
    type: 'div',
    props: {
        children: [
            {
                type: 'p',
                props: {
                    children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
                type: Button,
                props: {
                    color: 'green',
                    children: '확인'
                }
            }
        ]
    }
}
// 최종
{
    type: 'div',
    props: {
        children: [
            {
                type: 'p',
                props: {
                    children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
                type: 'button',
                props: {
                    className: 'bg-green',
                    children: {
                        type: 'b',
                        props: {
                            children: '확인'
                        }
                    }
                }
            }
        ]
    }
}

Elements의 특징

React elements are immutable

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

화면갱신이 필요한 경우 component라는 틀로 element를 만든다. (java class / instance)

createElement로 새로운 element를 만들어 기존 element와 바꿔치기한다.

Elements 렌더링하기

Root DOM Node

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

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

React application은 일반적으로 하나의 루트 DOM 노드가 있습니다.

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

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

React 엘리먼트를 root.render()에 전달해야 합니다.

// 매 초 현재 시간을 보여주는 예제 코드
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

현재 시간을 포함하는 엘리먼트를 생성하여 root.div에 렌더링하는 tick함수이다.

setInterval을 이용해 1초마다 호출한다.

매초 화면에 새로운 시간이 나오게 되는데 내부적으로 새로운 element를 생성하여 바꿔치기한다.

https://codepen.io/gaearon/pen/gwoJeZ?editors=1010

Hello World in React

...

codepen.io