Rendering Elements (엘리먼트 렌더링)

https://ko.reactjs.org/docs/rendering-elements.html 를 읽고 정리한 글입니다.

 

• Element(엘리먼트) : React 앱의 가장 작은 단위
  • 화면에 표시할 내용 기술
  • 컴포넌트의 구성 요소 / React 애플리캐이션을 구성하는 블록
  • 일반 객체(plain object)이며 쉽게 생성 가능 (브라우저 DOM 엘리먼트와는 다름)
  • 엘리먼트는 특정 시점의 UI를 보여준다
  • 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다
• React DOM : React 엘리먼트와 일치하도록 DOM을 업데이트
• 리액트로 구성된 애플리케이션은 일반적으로 하나의 root DOM node가 있다
• React Element를 root DOM node에 렌더링하기 위해서는 ReactDOM.render()로 전달
  • ReactDOM.render() : React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• React Element는 불변객체로 엘리먼트를 생성한 후 해당 엘리먼트의 자식이나 속성 변경 불가능
• 대부분의 React 앱은 ReactDOM.render()를 한 번만 호출
• React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트