[리액트] React Element

1. Element(React element)란?

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

• DOM Element의 가상 표현

• 화면에 보이는 것을 기술(표현)함. (React element의 내용을 기반으로 실제 DOM element가 생성됨)

// element의 예시
const element = <h1>Hello, World!</h1>

2. Element의 형태

• React Element는 자바스크립트 객체의 형태로 존재함.

/* createElement()의 내부 생김새 */

React.createElement(
	type, // html 태그 or 다른 react component
	[props], // element의 속성
	[...children] // 현재 element의 자식 element
)

/* Element의 생김새 예시 */

// HTML 태그가 type으로 들어온 경우
{
	type:'button',
	props:{
		className:'bg-green',
		children:{
			type:'b',
			props:{
				children: 'Hello, element!'
			}
		}
	}
}

// React Component가 type으로 들어온 경우
{
	type:Button,
	props:{
		color:'green',
		children:'Hello, element!'
	}
}

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

// confirmDialog의 element의 형태
{
  type: 'div',
  props: {
    children: [
      { // <p> 부분
        type: 'p',
        props: {
          children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
        }
      },
      
      { // <Button> 부분
        type: Button,
        props: {
          color: 'green',
          children: '확인'
        }
      }
    ]
  }
}

• 컴포넌트 렌더링 과정에서 React.createElement() 함수를 통해 모든 컴포넌트가 (React)Element로 변환됨.

3. Element의 특징

• immutable(불변성) ⭐⭐⭐

  • Element 생성 후에는 children이나 attributes를 변경할 수 없다!

  • 이러한 특징으로 인해 새로운 Element를 생성하여 기존의 Element와 바꿔치기 하는 방식으로 화면 전환을 수행함.

4. Element 렌더링하기

Root DOM Node

/* Root DOM Node */
<div id = "root">
	// 모든 React element가 Root Dom Node 내부에 렌더링됨
</div>

Root에 React Element 렌더링 하기

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

렌더링 된 Elements를 업데이트 하기

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

setInterval(tick, 1000);

// React Element의 '불변성'이라는 특징으로 인해 기존 element가 변경되는 것이 아닌
// tick함수가 호출 될 때마다 새로운 element를 만들어 기존의 element와 바꿔치기 하는 방식으로 동작함.

인용 자료 출처
처음 만난 리액트