React Elements의 정의와 생김새
■ React Elements의 정의와 생김새
- Elements란?
: 엘리먼트라는 영어 단어는 요소, 성분이라는 뜻을 가지고 있다.
즉 어떤 물체를 구성하는 성분!
리액트의 엘리먼트도 리액트 앱을 구성하는 요소를 의미한다.
# 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들이라는 의미
리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라고 부른다.
# 해당 페이지에서 보이는 엘리먼트는 리액트 엘리먼트가 아닌 DOM 엘리먼트이며, HTML 요소를 나타낸다.
- 리액트 엘리먼트와 DOM 엘리먼트 차이는?
# React 엘리먼트는 DOM 엘리먼트의 가상 표현이라 볼 수 있다.
# DOM 엘리먼트는 React 엘리먼트에 비해 많은 정보를 담고 있기 때문에 상대적으로 크고 무겁다.
# 리액트 엘리먼트는 화면에서 보이는 것을 기술한다.
# 엘리먼트가 기술한 내용을 토대로 실제 우리가 화면에서 보게 되는 DOM 엘리먼트가 만들어진다.
# 변수 이름은 element이고 대입될 값은 React createElement 함수를 사용하여
엘리먼트를 생성하며, 이는 리액트 엘리먼트다.
# 리액트는 이 엘리먼트를 이용해서 실제 우리가 화면에서 보게될 DOM 엘리먼트를 생성한다.
■ Elements의 생김새
React Elements는 자바스크립트 객체 형태로 존재한다.
엘리먼트는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는
일반적인 자바스크립트 객체다.
이 객체는 마음대로 변경할 수 없는 불변성을 갖고 있다.
★ 1
# 위 코드와 같이 타입에 html 태그 이름이 문자열로 들어가는 경우 엘리먼트는
해당 태그 이름은 가진 DOM 노드를 나타내고 props는 속성에 해당한다.
위 엘리먼트가 실제로 랜더링이 된다면? 아래와 같은 DOM 엘리먼트가 된다.
엘리먼트 타입의 HTML 태그 이름이 문자열로 들어가는 것이 아닌 경우에는?
# 위 자바스크립트 코드는 React 컴포넌트 엘리먼트를 나타낸 코드로 일반적인 자바스크립트 객체다.
# ★ 1 에 나왔던 엘리먼트와 한 가지 다른점은 타입의 문자열로된 HTML 태그가아닌 React 컴포넌트의 이름이 들어갔다.
# react-element는 자바스크립트 객체 형태로 존재한다.
# createElement함수 호출 시 필요한 3가지 파라미터
- type : html 태그 이름이 문자열로 들어가거나 또 다른 react 컴포넌트가 들어가게 된다.
이 것이 개발자 도구를 통해 보았던 html 태그가 된다.
모든 React 컴포넌트는 최종적으로 HTMl 태그를 사용하게 되어 있으며,
하나의 컴포넌트는 여러 개의 자식 컴포넌트를 포함할 수 있고 자식 컴포넌트를
모두 분해해 보면 HTML 태그가 나온다.
- props : 엘리먼트 속성
html 태그안의 클래스 및 스타일을 attribute라 하며, props는 attributes보다
상위에 있는 복잡한 개념이지만 추후 더 배울 예정
- children : 해당 엘리먼트의 자식 엘리먼튿르이 이 부분에 들어가게 된다.
- create element 함수가 동작하는 과정
# confirmDialog 컴포넌트의 엘리먼트는?
# 첫 번째 칠드런은 type이 html 태그인 p태그이기 때문에 곧 바로 랜더링이 될 수 있는 상태
# 두 번재 칠드런의 타입은 HTML 태그가 아닌 React 컴포넌트의 이름인 버튼이다.
이 경우 React는 버튼 컴포넌트의 엘리먼트를 생성해서 합치게 된다.
# 컴포넌트 랜더링을 위해 모든 컴포넌트가 CreateElement 함수를 통해 최종적으로 변환된 코드
※ React의 Element는 우리 눈에 실제로 보이는 것을 기술한다.