[TIL/React] 리액트 엘리먼트, DOM 엘리먼트

리액트 엘리먼트

JS 객체로, 리액트 컴포넌트가 렌더링 할 내용을 설명한다.

가상 DOM에서 관리 되고, 변경 사항을 효율적으로 반영하기 위해 사용한다.

리액트의 Virtual DOM (Document Ojbect Model)에 존재하는 엘리먼트는 리액트 엘리먼트가 된다.

• 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이다.
• 리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.
• 불변성, 따라서 엘리먼트 생성 후에는 children 이나 attributes를 바꿀 수 없다 -> 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 해야한다.

---

 

DOM 엘리먼트

실제 웹 페이지 구성 요소이다.

브라우저가 HTML을 해석해서 만든 객체

사용자에게 실제로 보이는 웹 페이지의 구성요소

실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 된다.

---

엘리먼트의 특징

 

Virtual DOM은 변경된 부분을 계산(Compute Diff)하고 해당 부분만을 다시 렌더링한다. (빨간색으로 표시된 원들이 변경된 엘리먼트)