React Elements 의 특징

1. immutable (불변성 )

즉 Elements가 불변성의 특징을 가진다는 것은 Elements 생성후에는

chiledren이나 attributes를 바꿀 수 없다는 것을 의미한다.

 

붕어빵틀에 붕어빵속에 슈크림이 들어가던 팥이 들어가던 틀어 구워져서 만들어지기 전에는

다양한 붕어빵이 될 수 있지만 한번 슈크림이 들어가서 구워지면 그 속을 다시 팥으로 바꿀 수 없는 것과 마찬가지이다.

 

2. Root DOM Node

<div id="root"></div>

  모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다.

 

  반면에 기존에 있던 웹사이트에 추가적으로 React를 연동하게되면 여러개의 분리된 수많은 Root DOM node를 가지게 될 수 도 있다.

 

  Root dvi에 실제로 React Elements를 랜더링 하기 위해서는 다음과 같은 코드가 실행되어야한다.

ReactDOM.render(element, document.getElementById('root'));

 

 ReactDOM.render() 라는 함수는 element를 받아서 root dom node에 렌더링해주는 것이다.

여기서도 알 수 있다시피  React Element와 DOM  Element는 서로 다른 개념이라는 것을 알 수 있다.

(ReactElement는 Virtual DOM에 존재하는 것이고 DOM Elements는 실제 브라우저에 존재하는 것이다.

 

React Element가 랜더링되는 과정은 결국 Virtual DOM에서 실제 DOM으로 이동하는 과정이라고 볼 수 있다.