엘리먼트 렌더링
- 화면의 가장 작은 단위
- 화면에 표시할 내용을 기술
- 일반 객체
- React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트
- 컴포넌트와 엘리먼트는 다른 것이다.
const element = <h1>hello world</h1>
DOM에 엘리먼트 렌더링하기
<div id="root"></div>
- 루트 DOM 노드
- 안에 들어가는 모든 엘리먼트를 React DOM에서 관리
- 일반적으로 React 애플리케이션은 하나의 루트 DOM으로 이루어짐
- 많은 수의 독립된 DOM 루트 노드가 있을 수 있다.
렌더링 된 엘리먼트 업데이트 하기
- React 엘리먼트는 불변 객체
- 엘리먼트 생성 후 해당 엘리먼트의 자식이나 속성을 변경 불가
- 특정 시점의 UI를 보여준다.
- UI를 업데이트 하는 유일한 방법
- 새로운 엘리먼트를 생성한다.
- ReactDOM.render()로 전달
변경된 부분만 업데이트하기
- React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교
- DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트
- 특정 시점에 UI가 어떻게 보일지 고민하기