Element

Element : 어떤 물체를 구성하는 성분

리엑트 앱을 구성하는 가장 작은 블록들
-> 그냥 화면에 보이는 모든 것이라 생각하면 됨

처음엔 Virtual DOM에서 React Element로 존재하다가, 렌더링을 통해서Browser DOM의 DOM Element로 변환된다.

Element의 생김새?

아래는 JS 문법의 버튼 Element이다.

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

렌더링을 거치면, 다음과 같이 변환된다.

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

위의 버튼 Element를 React Element를 쓰면 다음과 같이 바꿀 수 있다.

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

{
  type: Button,
  props: {
    color: 'green',
    children: 'Hello, element!'
  }
}

렌더링

immutable (불변의)

React Element는 생성 후에는 children이나 Attributes를 바꿀 수 없다.

Element 새로 만들기

Virtual DOM에서 특정 Element를 찾아 변경하고, 이를 Browser DOM에 적용한다.

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플