Element란 리액트 앱을 구성하는 가장 작은 블럭들
리액트의 Virtual DOM에 존재하는 element는 React Elements
브라우저 DOM에 존재하는 element는 DOM elements
리액트 element는 DOM element의 가상 표현
DOM element는 리액트 element에 비해서 많은 정보를 담고 있어서 크고 무거움
elements는 화면에서 보이는 것들을 기술
element의 형태
리액트 Elements는 자바스크립트 객체 형태로 존재
{
type: 'button',
props: {
className: 'bg-green',
children: {
type: 'b',
props: {
children: Hello, element!'
}
}
}
}위 엘리먼트가 렌더링이 되면 DOM 엘리먼트는
<button class='bg-green'>
<b>
Hello, element!
</b>
</button>{
type: Button,
props: {
className: 'bg-green',
children: {
type: 'b',
props: {
children: Hello, element!'
}
}
}
}위처럼 엘리먼트 type에 문자가 아닌 이름이 들어가면
React.createElement()함수 실행
React.createElement(
type, // html태그(문자열)나 리액트 컴포넌트가 들어감
[props], // 엘리먼트의 속성보다 상위개념
[...chilred]
)컴포넌트 렌더링을 위해서 컴포넌트가 React.createElement() 함수를 통해 엘리먼트로 변환된다
리액트 elements의 특징
immutable - 불변성
한번 생성된 엘리먼트는 변하지 않는다
-> elements '생성 후'에는 chilren이나 attributes를 바꿀 수 없다
그렇다면 중간중간 화면이 바뀔때는 어떻게 될까
기존 elements의 요소가 바뀌는게 아니라 새로운 elements를 생성해서 갈아끼우게 된다.
elements 렌더링
<div id="root"></div>- root DOM 노드
모든 리액트 웹사이트는 단하나의 root DOM 노드를 가진다
이 안의 모든 노드는 리액트에 의해 관리된다
여기서 기존의 웹사이트에 추가적으로 연동하게 되면 여러개의 분리된 root DOM 노드를 가지게 된다
리액트 element(virtual DOM)와 DOM element(실제 DOM)는 다른 것
리액트 element가 렌더링되는 과정은 실제 DOM으로 이동하는 과정
렌더링된 element를 업데이트하기
