react - 2. ReactDom 으로 그리기

책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다.

ReactDom에는 리액트 엘리먼트를 브라우저에 렌더링 하는데 필요한 모든 도구들이 들어 있다.

리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 랜더링 하기 위해 ReactDOM.Render 를 사용한다.

아래의 이미지를 보면,  ReactDOM.Render 는 첫번째 인자(빨간박스)는 렌더링할 리액트 엘리먼트,

두번째 인자(노란박스)는  렌더링이 일어날 대상 DOM 노드다.

위에 소스에서 보면 react-container 라는 id를 갖고 있는 div의  h1 태그 및 그 안에 내용이 추가 되어  화면에 렌더링이 되어 진다.

브라우저 화면

모든 DOM 렌더링 기능이 ReactDOM으로 옮겨 졌다.

브라우저는 단지 리액트를 사용 할 수 있는 대상 플랫폼 중 하나 일 뿐이다.

우리가 해야 할 일은 이렇게 엘리먼트를 만들고 그 엘리먼트를 DOM 으로 랜더링하는 것이 전부다.