Rendering Elements in React(리액트)

ko.reactjs.org/docs/rendering-elements.html의 내용을 바탕으로 재정리한다.

이하 자바스크립트는 Js라고 명칭 한다.

 

엘리먼트는 React의 가장 작은 단위이며 화면에 표시할 내용을 기술한다.

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

 

브라우저의 DOM 엘리먼트와 달리 React의 엘리먼트는 일반 객체처럼 쉽게 생성할 수 있다.

React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

 

***컴포넌트의 엘리먼트와 혼동할 수 있다. 엘리먼트는 컴포넌트의 구성 요소이다

DOM에 엘리먼트 렌더링 하기

HTML 파일 어딘가 <div> 태그가 있다고 가정해본다.

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 "루트"DOM 노드라고

한다.

 

리액트로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드만 갖는다.

리액트를 기존 앱에 통합하려는 경우, 그 수만큼 많은 수의 독립된 루트 DOM노드가 있을 수

있다.

 

React 엘리먼트를 root DOM 노드에 렌더링 하려면 ReactDOM.reader()을 사용하면 된다.

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

CodePen에서 실행하기

렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변의 객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나

속성을 변경할 수 없다.

엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.

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

<--- 시계가 똑닥 거리는 예제 --->

CodePen에서 실행하기

위 함수를 setInterval()을 이용해 1초마다 ReactDOM.render를 호출한다.

변경된 부분만 업데이트하기

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을

원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된

텍스트 노드만 업데이트했다.

경험에 비추어 볼 때 특정 시점에 UI가 어떻게 보일지 고민하는 이런 접근법은 시간의

변화에 따라 UI가 어떻게 변화할지 고민하는 것보다 더 많은 수의 버그를 없앨 수 있다.

 

 

출처 : ko.reactjs.org/docs/rendering-elements.html