💗 Element

✍ Element란?

물체를 구성하는 성분,

🟡 리액트 앱을 구성하는 가장 작은 블럭들,
🟡 화면에서 보이는 것들을 기술,
🟡 자바스크립트 객체 형태로 존재

React Element는 Dom Element의 가상적인 것!

React Element는 실제 우리가 보는 Dom Element를 만들게 됨

✍React 특징

불변성, Elements 생성 후에는 Children, attributes를 바꿀 수 없다.
(구어져 나온 붕어빵의 속 내용은 바꿀 수 없는 것과 같음!, 완성된 붕어빵 = elements)

따라서, 변화를 하려면, Element를 새롭게 생성해야 함!

✍ 코드 예시

const element = <h1>Hello, World!</h1>; 
//대입 연산자 왼쪽 부분의 이름이 element임 

{
 	type: 'button', //html 태그 
    props: {
    	className : 'bg-green',
        children : {
        	type: 'b',
            props: {
            	children: 'Hello, Element!'
            	   }
          }
}

//위의 element가 실제로 렌더링 된다면...? 
  
  <button class = 'bg-green'>
    <b>
      Hello, Element!
    </b>
 </botton>
  
  
  {
    type: Button,
    props: {
      color: 'green',
      children: '확인'
    }
  }
  

✍ Element Rendering

= virtual Dom으로 이동하는 것

const element = <h1> 하이! </h1>
ReactDOM.render(element, document.getElementById('root'));

✍ Rendering된 Element 업데이트

= Element 다시 생성해서 바꿔치기하는 것

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

setInterval(tick, 1000); 
//tick 함수가 호출될 때마다 element가 새로 만들어져서 바꿔치기 됨. 
// 새로운 element가 만들어지고 기존 element와 변경되면서 업데이트되는 것.