[React] 3. Element

출처: React 공식 홈페이지

엘리먼트 렌더링 – React (reactjs.org)

 

 

1. 엘리먼트(Element)

> 엘리먼트는 React 앱의 가장 작은 단위. 컴포넌트의 구성요소
const element = <h1>Hello, world</h1>;

 

 

2. react 엘리먼트를 노드(태그)에 전달하는 방법 

> ReactDOM.render

<div id="root"></div> 
const element = <h1>Hello, world</h1>;

ReactDOM.render(element, document. getElementById('root'));

 

 

3. 엘리먼트 업데이트 방법

- 한번 생성된 element는 불편의 객체이다
- 업데이트하는 방법은 element를 다시 노드(태그)에 연결하는 방법밖에 없다.

 

Ex) 아래는 1초마다 다시 

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);