[React] 1. Hello World

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

가장 단순한 React 예시이다.

1. ReactDOM

• react-dom package는 앱의 최상위 레벨에서 사용할 수 있는 DOM에 특화된 메서드와 필요한 경우 React 모델 외부로 나갈 수 있는 해결책을 제공
• ReactDOM이란 Virtual DOM에서 HTML을 생성하는데 필요한 라이브러리
• ES6를 사용할 시에는 import ReactDOM from 'react-dom'
• ES5를 사용할 시에는 var ReactDOM = require('react-dom')

render()

ReactDOM.render(element, container[, callback])

• element : 렌더링할 리액트 엘리먼트 ex)< App />
• container : 렌더링이 일어날 대상 DOM 노드 ex)document.getElementById('app')

1. 리액트 엘리먼트를 컨테이너 돔에 렌더링하고 반환
2. 리액트 엘리먼트가 이전에 컨테이너 돔에 렌더링이 되었다면,
   해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는데 필요한 DOM만 변경

<주의>

1. ReactDOM.render()는 컨테이너 노드 수정이 아닌 컨테이너 하위 노드만 수정함.
   자식노드를 덮어쓸 필요 없이 기존의 DOM 노드에 컴포넌트 추가 가능
2. ReactDOM.render()는 현재 ReactComponent 루트(root) 인스턴스에 대한 참조를 반환하나, 이 반환 값을 사용하는 것은 레거시(과거에 개발되어 현재에도 사용하는 낡은 소프트웨어로 새로 개발된 현재의 기술이나 방식을 부각시키는 의미)이며 React 신규 버전이 컴포넌트를 비동기로 렌더링하는 경우가 있기 때문에 피해야함.
   ReactComponent 인스턴스 참조가 필요하면 루트 엘리먼트에 콜백ref를 붙인다.