[React]요소(element) 렌더하기

element

-element는 React 앱의 가장 작은 단위이다.

- element는 화면에 표시할 내용을 기술한다.

- 브라우저의 DOM 엘리먼트와 달리 리엑트 엘리먼트는 일반 개체이다.

- 리액트 DOM은 리액트 엘리먼트와 일치하도록 DOM을 최신화 한다.

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

+ 컴포넌트와 엘리먼트는 다른 개념이다. 엘리먼트는 컴포넌트의 구성요소라고 생각하면 된다.

 

DOM에 엘리먼트 렌더링 하기

예시로 HTML 안에 <div>가 아래와 같이 있다고 해보자

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

우리는 위의 div 태그를  “root” DOM node 라고 부른다. 왜냐하면 div 안의 모든 것들이 react DOM으로 관리 되기 떄문이다. 보통 리액트로 만들어지는 어플리케이션은 하나의 root DOM node를가진다.

그러나 기존 앱에 통합을 한다면, 여러개의 독립된 root DOM nodes를 가질 것이다.

 

ReactDOM.render()

react element를 root DOM으로 랜더하기 위해서는 ReactDOM.render()를 사용한다

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

 

 

랜더된 엘리먼트에 업데이트 하기

React elements ar immutable. 즉 한번 엘리먼트를 생성하면 그것의 자식과 속성을 변경할 수 없다. 엘리먼트는 단지 특정 시점의 UI를 보여줄 뿐이다. 즉, UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 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);

위 함수는 setInterval() 콜백을 이용해 초마다 ReactDOM.render()를 호출한다. 실제로 대부분의 React 앱은 ReactDOM.render()을 한번만 호출한다.