1) Elemnets
= 어떤 물체를 구성하는 성분
= 화면에서 보이는 것을 기술한 것.
==> React 엘리먼트는 DOM 엘리먼트의 가상 표현
= 리액트 Elements는 자바스크립트 객체 형태로 존재
2) 불변성 (immutable)
=> 한 번 생성된 엘리먼트는 변하지 않음.
=> 생성된 엘리먼트는 children이나 attributes를 바꿀 수 없음.
Q :그러면 화면을 바꿀 수 없는 것 아닌가?
=> 생성된 엘리먼트를 바꿀 수 없는거지만, 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꾸면 됨.
=> 빠른 렌더링
3) 렌더링 (Rendering)
- 루트 돔노드
: div 태그 안에 리액트 엘리먼트들이 렌더링 됨
(div 태그 안에 있는 모든 것이 리액트 돔에 의해서 관리됨.)
<div id="root"></div>-> 리액트만으로 만들어진 모든 웹 사이트들은 단 하나의 루트 돔노드를 가지게 됨.
-> 추가적으로 리액트를 연동하게 되면 여러 개의 분리된 수많은 루트 돔노드를 가질 수 있음.
- 엘리먼트 생성 후 루트 div에 렌더링한 코드
const element = <h1>안녕, 리액트!</h1>;
ReactDOM.render(element, documeent.getElementById('root'));-> 렌더링을 위해 리액트돔에 렌더 함수를 사용함.
element를 HTML element(DOM element)에 렌더링하는 역할
= React Element가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정
4) 렌더링 업데이트
✨오늘의 프로그래밍 Tip ✨
-
SPA (Single Page Application)
=> 하나의 페이지만 존재하는 웹 사이트 (애플리케이션)1) js의 경우 변수 선언 시, 자료형 쓰지 않고 변수가 선언되는 시점에서 동적으로 자료형이 결정됨 = Dynamic Typing(동적 타이핑)
2) Rect Element = Virtual DOM에 존재
3) DOM Element = 실제 브라우저의 DOM에 존재
