[React] 리액트 엘리먼트(element) 렌더링

 

 

1. 엘리먼트(Element)

 

1) 정의

- Element: 요소, 성분이라는 뜻으로 어떤 물체를 구성하는 성분

- DOM 엘리먼트와 리액트 엘리먼트 비교

DOM 엘리먼트	리액트 엘리먼트
- 웹 사이트에 대한 모든 정보를 담고 있는 객체인 DOM(Document Object Model)에서 사용하는 용어로 HTML요소를 나타냄 - 실제로 화면에서 볼 수 있는 HTML 요소 - 리액트 엘리먼트에 비해서 많은 정보를 담고 있어서 상대적으로 크고 무거움	- 리액트 앱을 구성하는 가장 작은 블록요소 - 화면에 나타나는 내용을 기술한 자바스크립트 객체로 DOM 엘리먼트 형태 - DOM 엘리먼트의 가상표현: 리액트 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게되는 DOM 엘리먼트가 만들어짐

 

 

 

2) 생김새

리액트 엘리먼트는 자바스크립트 객체 형태로 존재함

엘리먼트는 컴포넌트 타입(type)과 속성(props) 및 내부의 모든 자식(children)에 대한 정보를 포함하고 있는 일반적인 자바 스크립트 객체(불변성을 갖는 객체)

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

// 버튼을 나타내기 위한 엘리먼트로 단순한 자바 스크립트 객체
{
    type: 'button', // type에 HTML 태그 이름이 문자열로 들어가는 경우, 엘리먼트는 해당 태그 이름을 가진 DOM Node를 나타냄
    props: { // 속성을 나타냄
    	className: 'bg-green',
        children: {
            type: 'b',
            props: {
            	children: 'Hello, element!'
                }
            }
        }
 }
 
 // 위 엘리먼트가 렌더링이 된다면 아래와 같은 DOM 엘리먼트가 됨
 <button class='bg-green'>
    <b>
    Heelo, elemenet!
    </b>
</button>

 

 

 

// 버튼을 나타내기 위한 리액트 컴포넌트 엘리먼트 자바 스크립트 객체
{
    type: Button, // type에 HTML 태그 이름이 문자열 또는 리액트 컴포넌트의 이름이 들어감(여기에선 리액트 컴포넌트 이름이 들어감)
    props: { // 속성을 나타냄(class, style 등의 attributes보다 좀 더 상위에 있는 개념)
    	color: 'green',
        children: 'Hello, element!' // 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 컴포넌트 엘리먼트
 {
    type: 'div',
    props: {
    	children: [
            {
                type: 'p', // HTML 태그인 p태그이기 때문에 곧바로 렌더링 될 수 있는 상태
                props: {
                        children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
                type: Button, // 리액트 컴포넌트 이름인 Button, 이 경우 리액트는 Button 컴포넌트의 엘리먼트를 생성해서 합침
                props: {
                    color: 'green',
                    children: '확인'
                }
            }
    	]
    }
 }
 
 // 리액트 컴포넌트 Button 컴포넌트의 엘리먼트를 생성하여 적용한 최종 엘리먼트
  {
    type: 'div',
    props: {
    	children: [
            {
                type: 'p', // HTML 태그인 p태그이기 때문에 곧바로 렌더링 될 수 있는 상태
                props: {
                        children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
                type: 'button', // 리액트 컴포넌트 이름인 Button, 이 경우 리액트는 Button 컴포넌트의 엘리먼트를 생성해서 합침
                props: {
                    color: 'bg-green',
                    children: {
                    	type: 'b',
                        props: {
                        	children: '확인'
                        }
                    }
                    
                }
            }
    	]
    }
 }

 

3) 특징

- 불변성(Immutable): 한 번 생성된 엘리먼트는 변하지 않음 -> 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없음

=> 화면에 변경된 엘리먼트를 보여주기 위해서는 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 해야 함

 

2. 렌더링 하기

// root라는 이름을 가진 <div> 태그
<div id="root"></div>

Root DOM node

<div>태그 안에 있는 모든 엘리먼트들이 렌더링됨 ->  <div>태그 안에 있는 모든 것들이 리액트 DOM에 의해서 관리되기 때문

오직 리액트만으로 만들어진 모든 웹사이트들은 단 하나의 Root DOM node를 가지게됨

 

// element를 생성하고 생성된 엘리먼트를 root div에 렌더링하는 코드
const element = <h1> 안녕, 리액트!</h1>;
ReactDOM.render(element, document.getElementById('root')); // render(리액트 엘리먼트, HTML엘리먼트)함수를 사용

=> 리액트 엘리먼트는 리액트의 Virtual DOM에 존재하며 HTML 엘리먼트는 실제 브라우저의 DOM에 존재하는 것

=> 리액트의 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정

 

 

3. 렌더링된 엘리먼트 업데이트

- 엘리먼트의 특징인 불변성으로 인해 한 번 생성되면 바꿀 수 없기 때문에 업데이트를 위해서는 다시 생성해야함

- 새로운 엘리먼트를 생성하여 기존 엘리먼트와 바꿔치기 하는 것