Element ?
리액트 앱을 구성하는 가장 작은 블록들, 화면에서 보이는 것을 기술하는 역할을 합니다.
React Element : React의 Virtual DOM에 존재하는 엘리먼트
DOM Element : 실제 브라우저의 DOM에 존재하는 엘리먼트
React Element는DOM Element의 가상 표현이라고 볼 수 있습니다.
보통 React에서 엘리먼트는 React Element 를 말합니다.
엘리먼트가 기술한 내용을 토대로 실제 우리가 화면에서 보게 되는 DOM 엘리먼트가 만들어집니다. React Element 는 자바스크립트 객체 형태로 존재하며, 이 객체를 만드는 역할을 하는 것이 createElement함수입니다. 만들어진 객체는 마음대로 변경할 수 없는 불변성을 갖고 있습니다.
createElement함수 파라미터
{
type: Button,
props: {
color: 'green',
children: 'Hello, element!'
}
}type : html 태그 이름이 문자열로 들어가거나, 또 다른 react 컴포넌트가 들어갑니다.
props : Element의 속성.
children : 해당 Element의 자식 Element.
모든 react 컴포넌트는 최종적으로 html 태그를 사용하게 되어 있습니다.
{
type: 'div',
props: {
children: [
{
type: 'p',
props: {
children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'}
},
{
type: Button, // react 컴포넌트
props: {
color: 'green',
children: '확인'
}
}
]
}
}{
type: 'div',
props: {
children: [
{
type: 'p',
props: {
children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'}
},
{
type: 'button',
props: {
className: 'bg-green',
children: {
type: 'b',
props: {
children: '확인'
}
}
}
}
]
}
}Element의 불변성
Elements 생성 후에는 children 이나 attributes를 바꿀 수 없습니다. 이를 Element의 불변성이라고 합니다.
화면에 새로운 내용을 보여주기 위해 Virtual DOM은 변경된 부분을 계산, Compute Diff하고 해당 부분만을 다시 렌더링합니다.
Element는 불변성을 갖고 있기 때문에 화면에 새로운 내용을 보여주기 위해서는 새로운 Element를 만들어 기존 Element가 연결되어 있는 부분에 바꿔서 달면 됩니다.
상태 관리와 더불어 화면이 얼마나 자주 갱신되는지가 성능에 큰 영향을 미치게 됩니다.
Element 렌더링
<div id="root"></div>모든 리액트 앱에 필수적으로 들어가는 코드입니다. 이 div 태그 안에 리액트 엘리먼트들이 렌더링되며, 태그 안에 있는 모든 것이 리액트 돔에 의해 관리되기 때문에 이것을 root DOM 노드 라고 합니다.
오직 리액트만으로 만들어진 모든 웹사이트들은 단 하나의 root DOM 노드 를 가지게 됩니다. 반면에 기존에 있던 웹사이트에 추가적으로 리액트를 연동하게 되면 여러 개의 분리된 수많은 root DOM 노드 를 가질 수도 있습니다.
const element = <h1>안녕, 리액트!</h1>;
ReactDOM.render(element, document.getElementById('root'));루트 div에 React 엘리먼트를 렌더링하는 코드입니다. 첫번째 파라미터인 React 엘리먼트를 두번째 파라미터인 HTML 엘리먼트, 즉 DOM 엘리먼트에 렌더링하는 역할입니다.
| React 엘리먼트 | DOM 엘리먼트 |
|---|---|
| React의 Virtual DOM에 존재함 | 실제 브라우저의 DOM에 존재함 |
React 엘리먼트가 렌더링되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정이라고 할 수 있습니다.
