React element와 가상 돔

React Element

• 리액트 앱에서 가장 작은 블록들
  

개발자 도구에서 Elements를 확인 할 수 있는데 이때 볼 수 있는 것은 Dom Element이다.

Dom Element: 실제 브라우저 DOM에 존재하는 Element

React Element: 가상 DOM에 존재하는 Element

React Element는 자바스크립트 객체의 형태로 존재

{
	type: 'button',
	props: {
		className: 'bg-red',
		children: {
			type: h2,
			props:{
				children:'React Element'
			}
		}
	}
}

이게 DOM Element일 때

<button class='bg-red'>
	<h2>
		React Element
	</h2>
</button>

DOM (문서 객체 모델):

웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리 구조로 만든 객체

모델을 의미한다.

Virtual DOM(가상 돔): 실제 돔과 같은 내용을 담고 있는 복사본이다.
• 리액트는 가상돔을 사용하여 실제돔을 조작하는 일을 엄청나게 빠르게 해준다.

DOM 조작(가상 돔은 항상 2개의 가상 돔을 가지고 있다)

1. 가상 돔 생성: state가 변경될 때마다 화면을 새로 랜더링 한다.
2. Diffing: 랜더링 이전에 화면 내용을 가지고 있는 첫 번째 가상 돔과 업데이트 이후의 내용을 담고 있는 두 번째 가상 돔을 비교해서 어느 element가 변했는지 찾아낸다
3. 재조정: 바뀐 부분을 찾아서 실제 브라우저 화면에 적용
4. Batch update: 변경된 모든 element들을 한번에 동시에 실제 DOM에 적용 시킴