React - Rendering Elements

Elements

• Elements는 화면에 보이는 부분을 기술한다.

• 원래 Elements는 위 사진과 같이 DOM Elements를 의미했다.
• 위에 보이는 Elements는 각각 HTML 요소를 나타낸다.
• 리액트는 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어로 Descriptor를 사용했다. 
• 그러나, Descriptor의 최종 형태는 DOM Element였기 때문에 DOM과의 통일성을 위해 Element라고 부르게 되었다.
  • 따라서 리액트를 다루는 상황에서 Element라고 하면 보통 React Element를 뜻한다.
• Virtual DOM의 React Elements기 렌더링을 거쳐  Browser DOM의 DOM Elements가 된다.
• 따라서 React Elements는 DOM Elements의 가상 표현이라고 볼 수 있다.
• React Elements가 기술한 내용을 토대로 사용자가 화면에서 보게 되는 DOM Elements가 만들어진다.
• DOM Elements는 React Elements에 비해 많은 정보를 담고 있기 때문에 상대적으로 크고 무겁다.
• React Elements는 자바스크립트에서 객체 형태로 존재한다.

 

React Element 예시

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

• 뭔지 잘 몰라도 버튼을 나타내는 Element라는 것을 알 수 있다.
• 자바스크립트 코드로만 이루어져 있다. 

 

위의 React Elements가 DOM elements로 렌더링 되었을 때

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

 

 

React.createElement()의 구조

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

type

• html 태그 이름이 문자열로 들어가거나, 또 다른 React Component가 들어간다.
• 렌더링을 거치면 HTML 태그가 된다.
• 모든 React Component는 최종적으로 HTML 태그를 사용하게 되어 있다.
  • 하나의 Component는 여러 자식 Component를 포함할 수 있고, 자식 Component를 끝까지 분해해 보면 결국 HTML 태그가 나오게 된다.

props

• elements의 속성이다.

children

• 해당 Element의 자식 Elements가 들어가게 된다.
• 개발자 도구에서 하나의 HTML 태그 하위에 여러 개의 HTML 태그가 나오는 것을 생각하면 된다.

 

예시

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 Component가 Button Component를 포함하고 있다.

 

ConfirmDialog Component의 Element

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

• 첫 번째  children의 타입은 HTML 태그 중 하나인  <p> 태그이기 때문에 곧바로 렌더링 할 수 있다.
• 두 번째 children의 타입은 React Component인 Button이다. 이 경우에 React는 Button Component의 Element를 생성해서 합친다.

 

Element의 최종 모습

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

• 위와 같이 한 Component의 렌더링을 위해서 모든 하위 Component가 createElement() 함수를 통해 Element로 변환된다.

 

 

React Elements의 특징

불변성(immutable)

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

 

Elements가 불변하다면 화면 갱신은 어떻게 이루어질까?

• 기존의 Elements는 변경할 수 없으니 새로운 Elements를 만들어 기존의 Elements와 바꿔치기하면 된다.
• 리액트는 빠른 렌더링 속도를 가지고 있다.
• 빠른 렌더링 속도가 가능한 이유는 내부적으로 virtual DOM을 사용하는 데에 있다.
• VitrualDOM은 화면의 변경을 감지하고 계산하여 다시 렌더링 한다.
• 리액트는 화면 갱신이 얼마나 자주 일어나는지가 성능에 큰 영향을 미친다.
• 이를 고려하여 설계하자.

 

 

Elements 렌더링 하기

Root DOM Node

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

• div 태그 안에 React Elements가 렌더링 되며 이를 Root DOM Node 한다. div 태그 안에 있는 모든 것이 React  DOM에 의해 관리되기 때문이다.
• React만으로 만들어진 모든 웹사이트는 단 하나의 Root DOM Node를 가지게 된다.
• 반면에 기존 웹사이트에 추가적으로 React를 연결하게 되면 여러 개의 분리된 수많은 Rookt DOM Node를 가질 수도 있다.

 

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

• Element를 생성하고, root <div>에 렌더링 하는 코드이다.
• 렌더링을 위해 ReactDOM의 render()라는 함수를 사용한다
• 이 함수는 첫 번째 파라미터인 react element를 두 번째 파라미터인 DOM element에 렌더링 하는 역할을 한다.
• vitrual DOM에서 실제 DOM으로 렌더링 하는 과정이다.

 

만약 Element를 업데이트하고 싶다면?

• Element는 불변하기 때문에 Element를 업데이트하고 싶다면 다시 생성해야 한다.

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

setInterval(tick, 1000);

 

• 이 코드는 tick()이라는 함수를 정의하고 있다. 
• tick() 함수는 현재 시간을 나타내는 element를 생성하여 root <div>에 렌더링 하는 역할을 한다.
• 자바스크립트의 setInterval() 함수를 사용해 tick() 함수를 1초마다 한 번씩 호출하고 있다.
• 이 코드는 화면에 매초마다 새로운 시간을 보여줄 것이다.
• 내부적으로는 tick() 함수가 호출될 때마다 기존의
• element를 변경하는 것이 아니라 새로운 element를 생성하여 바꿔치기하는 것이다.

 

 

 

 

 

참고

인프런 - 처음 만난 리액트