[공식문서]엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위라고 보면된다.

엘리먼트는 화면에 표시할 내용을 기술한다.

 

const element = <h1>hello, world</h1>;

 

엘리먼트는 컴포넌트의 구성요소이므로 둘을 헷갈리면 안된다!

 

<div id="root"></div>

 

이 안에 들어가 있는 모든 엘리먼트를 React DOM에서 관리하기 떄문에 이것을 루트(root) DOM 노드라고 부르고,

React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면된다.

 

예시로 실시간으로 시간이 변경되는 내용에 대해 알아보자.

function tick() {    const element = (        <div>            <h1>hello, world</h1>            <h2>It is {new Date().toLocaleTimeString()}</h2>        </div>    );    ReactDOM.render(element, document.getElementById('root');) } setInterval(tick, 1000);

* new Date() : 함수가 실행되면 실행되는 시점에 날짜 및 시간 데이터를 갖고 오는 함수 

                    (요일, 월, 일, 연, 시, 분, 초 GMT기준 시간을 표시)

* toLocaleTimeString() : 사용자의 문화권에 맞는 시간표기법을 리턴 (운영체제 마다 문화권에 맞는 표기법을 가지고 있음)

* setInterval() : 주기적으로 인자를 실행하는 함수. 

function test() {     console.log("Hello!");  }  setInterval(test, 3000); 3초에 한번씩 test()함수를 실행하라는의미이며, 그럼 콘솔에 3초에한번씩 Hello! 가 찍힐것.