2. Element

 

정의

• Elements are the smallest building blocks of React apps.
• React의 Element는 React 앱을 구성하는 '요소'이다.
• (React) Element가 기술한 내용을 토대로, 실제 우리가 화면에서 보게 되는 DOM Element가 만들어진다.
• DOM Element : 실제 브라우저 DOM에 존재하는 Element
• React Element : 리액트 Virtual DOM에 존재하는 Element

 

형태

• Element는 자바스크립트 객체 형태로 존재한다.
• 이 객체는 마음대로 변경할 수 없는 불변성을 갖는다.
• createElement : 객체를 만드는 함수   

//기본형
React.createElement(
  type,          //DOM 노드인지, 아니면 컴포넌트 인스턴스인지 알려준다
  [props],       //해당 객체가 갖고 있는 속성
  [...children] 
)

//예시
{
 type: 'button',
 props: {
   className: 'button button-blue',
   children: {
     type: 'b',
     props: {
       children: 'OK!'
     }
   }
 }
}

 

 

불변성

• 한 번 생성된 Element는 변하지 않는다.
• Element 생성 후에는 children이나 attribute를 바꿀 수 없다.
• Element 변경은 새로운 Element를 만들어서 기존 Element를 교체하는 것과 같다.

• Virtual DOM은 변경된 부분을 계산 후 변경하고, 해당 부분만을 다시 Rendering한다.
• 원은 Element를 의미하며, 빨간색 원은 변경된 Element이다.
• 불변성 때문에 화면에 새로운 내용을 보여주기 위해서는, 새로운 Element를 만들어 기존 Element가 연결되어 있는 부분에 바꿔서 달면 된다.

 

렌더링

 렌더링은 Element를 실제로 화면에 보여주기 위한 과정이다. 즉, Virtual DOM에서 실제 DOM으로 이동하는 과정.

<div id='root'></div>

 

이 div 태그는 모든 React 앱에 필수적으로 들어가는 코드이다.

div 태그 안에 element들이 렌더링되며, 이를 root DOM node (Virtual DOM의 가장 최상단에 있는 노드)라고 한다.

 

- 예시

• Element를 먼저 생성하고, 생성된 Element를 root div에 렌더링하는 코드
• render(React element, HTML element)
• HTML element는 DOM element에 렌더링하는 역할을 수행한다.

const element = <h1> 리액트 공부 </h1>;
ReactDOM.render(element,document.getElementById('root'));