[REACT.02] REACT의 ELEMENTS

1. React의 Elements의 정의

 

-> Elements are the smallest building blocks of Reack apps.

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

리액트의 element는 dom element의 가상 형태를 의미한다

 

-> react elements는 javascript 객체 형태로 존재한다.

---

//html component로 들어가있는 code

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

html 태그 이름이 문자열로 들어가는 경우, element는 해당 태그 이름을 가진 DOM노드를 나타내고, 
propos는 속성에 해당된다.

위의 엘리먼트가 렌더링이 된다면,  아래와 같은 도움 엘리먼트가 된다.

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

---

//React componet element를 나타내는 code

{
	type: button,
	props:{
		color: 'green',
        cildren: 'hello, element!'
	}
}

React.createElement(
	type, 
    //첫번쨰 파라미터= type 이 들어간다. html 태그 혹은 또다른 react component가 들어간다.
    [props],
    //두번쨰 파라미터 = propse , element의 속성. class & stype => attribute의 상위 개념
    [..children]
    //세번째 파라미터 = 자식 element. 상위 html태그의 자식 html가 된다.
)

//Example Code

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

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

//ConfirmDialog element
{
// html element
	type: 'div',
   	 props:{
    	children:{
        	type : 'p',
           	 props:{
            		children:'내용을 확인하였으면, 확인 버튼을 눌러주세요';
            }
        },
        //react element -> button component를 가지고있다.
        {
        	type: Button,
            	props:{
            		color: 'green',
               	 	children: '확인'
            }
        }
    }
}

//최종 ConfirmDialog 머시기 component

{
// html element
	type: 'div',
   	 props:{
    	children:{
        	type : 'p',
           	 props:{
            		children:'내용을 확인하였으면, 확인 버튼을 눌러주세요';
            }
        },
        //react element -> html element
        {
        	type: Button,
            	props:{
            		className: 'bg-green',
                    children:{
                    	type: 'b',
                        props:{
                        	children: '확인'
						}
					}
				}
            }
        }
    }
}

 

 

2. React Elements의 특징

: 불변성을 가진다.(immutable) -> 한번 생성한 element는

children/ attributes를 바꿀 수 없다.

(붕어빵 틀에서 한번 구운 붕어빵은 바꿀 수 없는것과 같은 이치)

-> 화면에 변경되는 모습은 새로운 element를 만들어서 기존의 것과 

바꿔치기 하는것이다. 그것을 Virtual Dom이 하는 역할이다.

 

* Element 렌더링하기(실제로 엘리먼트 생성 후, 화면에 보여주기 위해서 거쳐야 하는 과정)

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

const element = <h1> hi, react!</h1> //(1)
ReactDOM.render(element, document.getElementById('root');//(2)

 

 

Root DOM Node를 이용해, element교체가 일어난다. 

(1) html element를 react element로 생성한다.

(2) ReactDom이라는 함수를 써서

     react element를 dom element에 렌더링 하는 역할을 한다.

‼️ React element는 react Virtual Dom에 존재 하는 것이고, Dom element는 실제 브라우저 Dom에 존재하는 것이다.

//Element 바꿔치기 예시

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

setInterval(tick,1000);

기존의 element에서 새로 생성된 element가 교체되어서, 그부분만 교체된다. 

 

 

3. React Element 실습