[React.js] 3. 요소 element

React에서 요소란 브라우저 DOM 엘리먼트와 달리 plain 객체며 쉽게 생성할 수 있다.

React DOM은 React 엘리먼트와 일치하도록 DOM를 업데이트한다.

element

index.js를 한번 살펴보자.

root를 만들어 렌더링하는 작업을 하고 있다. 내부에 있는 App 태그는 컴포넌트이다.

이걸 element hello world로 변경해보자.

기존에 있던 import App을 주석처리 해줘야 제대로 작동된다.

불변객체 element

element는 불변객체이기 때문에 생성 이후 변경할 수 없다.

변경을 원하면 새로운 엘리먼트를 생성하고 render 함수에 전달하면

ReactDOM은 기존 엘리먼트와 변경된 엘리먼트를 비교해, 변경된 부분만 따로 업데이트 한다.