element 렌더링 - 주요 개념

React 앱의 가장 작은 단위

주의 : Component랑 다름!

element는 Component의 일부다.

element 만들기

React element는 일반 객체다(plain object).
{ a : "", b: "" } 이런 객체.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

이렇게 생성하면 Babel이

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

이렇게 바꿔준다.

불변객체

React element는 불변객체다 (immutable).
생성 이후에 update를 할 수 없다는 뜻. (마치 const처럼)

리액트의 정수 : 변경된 부분만 업데이트하기

리액트의 가장 핵심적인 정신은 Virtual Dom을 만들어놓고 화면에서 변동되는 부분이 있을 경우에
그 부분만 리렌더링하자는 것.

그런데 element가 immutable 하다는 말은 ?
-> 렌더링이 작동할 때마다 element를 새로 만든다는 것이었다~

하긴, 새로운 객체를 만들어야만 기존 객체와 어디가 바뀐 부분인지 알 수 있겠지.