REACT | 처음 만난 리액트 - 4. Rendering Elements

1. Elements 의 정의와 생김새

Elements의 정의

the smallest building blocks

기존 웹 개발에서 말하는 엘리먼트는 DOM Elements이다.

HTML 요소, 우리가 실제로 볼 수 있는 것

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

-> 처음에는 Drscriptor라고 부름

하지만 최종적으로 나타나는 모습은 DOM Elements였기 때문에 Elements 라고 부르게 됨

REACT Elements vs DOM Elements

실제 브라우저의 돔에 들어있는 요소가 DOM Elements이고 리액트 가상 돔에 들어있는 것이 React Elements이다.

결국 리액트 엘리먼트는 돔 엘리먼트의 가상 표현이 되는 것이고, 그렇기 때문에 리액트 엘리먼트에 비해 돔 엘리먼트가 더 많은 정보가 들어있고, 상대적으로 무겁다.

--> 앞으로 엘리먼트는 리액트 엘리먼트를 말함

 

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

이것을 토대로 우리가 실제 화면에서 볼 수 있는 돔 엘리먼트가 만들어진다.

 

Elements의 생김새

리액트 Elemetns는 자바스크립트 객체 형태로 존재(일반적인 자바스크립트 객체와 같음)

예시) 

// 버튼 컴포넌트
function Button(props) {
	return (
    	<button> className={'bg-${props.color}'}>
        	<b>
            	{props.children}
               </b>
            </botton>
       )
}

// 컨펌 다이얼로그 컴포넌트
function ConfirmDialog(props) {
	return (
    	<div>
        	<p>내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
            <Button color='green'>확인</Button>
        </div>
    )
}

 

위의 코드를 보면 컨펌 다이얼로그 컴포넌트가 버튼 컴포넌트를 포함하고 있음

이때, 컨펌 다이얼로그 컴포넌트의 엘리먼트는

// 컨펌 다이얼로그 컴포넌트의 엘리먼트

{
	type: 'div'
	props: {
    	children: [
        	{
            	// html 태그이기 때문에 바로 랜더링 가능한 상태
            	type: 'p', 
                props: {
                	children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
            	// 리액트 컴포넌트이기 때문에 해당 컴포넌트의 엘리먼트 생성
            	type: Button, 
                props: {
                	color: 'green',
                    children: '확인'
                }
            }
        ]
    }
}

최종적으로는 모든 리액트 컴포넌트 타입이 랜더링 가능한 HTML 태그로 변환되어야한다.

// 최종 코드
{
	type: 'div',
    props: {
    	children: [
        	{
            	type: 'p',
                props: {
                	children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
            	type: 'button',
                props: {
                	className: 'bg-green',
                    children: {
                    	type: 'b',
                        props: (
                        	children: '확인'
                        }
                    }
                }
            }
        ]
    }
}

createElements를 통해서 모든 리액트 컴포넌트가 Elements로 변환됨

-> 랜더링을 위해서

 

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

Elements의 특징

- immutable(불변성)

한번 생성된 Elements는 변하지 않는다, children이나 attributes를 바꿀 수 없음

-> 이 말이 엘리먼트를 변경할 수 없다는 말처럼 보일 수 있지만, 컴포넌트가 변경되면 새로운 엘리먼트를 찍어내면 됨

-> 화면이 얼마나 갱신되는지가 성능을 결정하게 되기 때문에 잘 기억해 둬야함

 

Elements 렌더링하기

// Root DOM Node
<div id="root"><div>

리액트 만으로 생성한 코드의 경우 유일한 루트 돔을 가지게 됨

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

 

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

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

setInterval(tick, 1000);

내부적으로는 tick함수가 호출될때마다 기존 엘리먼트를 바꾸는 것이 아니라 새로운 엘리먼트를 생성하여 바꿔치기 하는 것