[React] 04. Element

엘리먼트 Element

• Dom Element
  • HTML 태그를 기반으로 생성된다.
  • 웹 페이지의 구조를 나타내는 객체
• React Element
  • DOM Element의 가상 표현
  • create element 함수를 통해 element로 변환된다.
  • 리액트 앱을 구성하는 가장 작은 빌딩 블록
  • Javascript object 형태
  • 불변성 : Elements 생성후에는 children, attributes를 바꿀 수 없다.
    • 기존 Elements 변경 불가능, 새로운 Element를 만들어 바꾸어야 함
• 아래의 단계를 거쳐 html에 적용된다.

1. JSX

const MyComponent = () => {
 return (
   <div className="container">
     <h1>Hello, world!</h1>
   </div>
 );
};

---

2. CreatElement 변환

const MyComponent = () => {
  return React.createElement(
    'div',
    { className: 'container' },
    React.createElement('h1', null, 'Hello, world!')
  );
};

---

3. React Element

const element = {
  type: 'h1',
  props: {
    className: 'container',
    children: 'Hello, world!'
  }
};

---

4. 실제 DOM에 업데이트 되는 HTML

<div class="container">
  <h1>Hello, world!</h1>
</div>