[REACT_MEMO] 파워노트4

# Rendering Elements

리액트의 엘리먼트 = 리액트를 구성하는 요소

 

엘리먼트는 요소, 성분을 의미

즉 어떤 물체를 구성하는 성분

 

Elements are the smallest building blocks of React apps.

= 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라 한다.

 

기존에 엘리먼트라고 하면

돔 엘리먼트를 지칭했다.

 

# 리액트 엘리먼트와 돔엘리먼트의 차이

리액트가 개발되던 아주 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했다.

처음에는 Descriptor로 불렸지만, 최종적으로 나타나는 형태는 돔엘리먼트 였기 때문에 돔과의 통일성을 위해서 엘리먼트로 부르는 것으로 변경되었다.

 

즉 리액트 엘리먼트는 돔 엘리먼트의 가상표현이라 볼 수 있다.

그리고 돔 엘리먼트는 리액트 엘리먼트에 비해 크고 많은 내용을 담고 있어 무겁다.

 

리액트 Elements는 화면에서 보이는 것들을 기술한다.

리액트 Elements는 자바스크립트 객체 형태로 존재한다.

 

 

createElement의 parameter

 const element = {

      type,                 // 엘리먼트의 유형 (div, span과 같은 html 태그가 들어갈수 있고, 다른 리액트 컴포넌트가 들어올 수 있다. )

                                   즉 최종적으로 html 태그가 되는것

      [props],            // 속성들이 들어가는 것, attribute보다는 좀 더 복잡한 상위개념

      [...children]      // 현재 엘리먼트가 포함하고 있는 자식 엘리먼트 
 }

 

 

 

# html or react 엘리먼트로 표현하기

 

 

아래 ConfirmDialog를 컴포넌트 별로 표현하면 아래와 같다.

 

 

 

결국 컴포넌트 렌더링을 위해서 모든 컴포넌트가 CreateElement를 통해 Element로 변환된다는 것을 기억해야함.