[react]Rendering Element

엘리먼트는 리엑트 앱의 가장 작은 빌딩 블록이다.

 

엘리먼트는 스크린에서 보고싶은 것을 묘사한다.

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

브라우저 돔엘리먼트와는 다르게, 리엑트 엘리먼트는 순수한 객체여서 생성 비용이 저렴하다. 리엑트 돔은 돔이 리엑트 엘리먼트와 매치되도록 업데이트 시킨다.

Note:
좀더 널리 알려진 개념인 "컴포넌트"와 엘리먼트를 혼동할 수 있다. 컴포넌트는 다음 섹션에서 다룬다. 엘리먼트는 컴포넌트를 "만드는" 요소이다. 다음 섹션으로 넘어가기 전에 이 섹션을 읽는 것을 권장한다.

---

돔에 엘리먼트를 렌더링하기

HTML 파일 어딘가에 <div>가 있다고 가정해보자:

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

우리는 이 돔 노트를 "루트"라고 부른다. 이 노드 안에 있는 모든것이 리엑트 돔에 의해 관리되기 때문이다.

 

리엑트로만 빌드된 애플리케이션은 보통 하나의 루트 돔 노드를 갖는다. 리엑트를 이미 존재하는 앱에 통합시킨다면, 원하는 만큼 격리된루트 돔 노드를 가질 수 있다.

 

리엑트 엘리먼트를 렌더링하기 위해, ReactDOM.createRoot()로 돔 엘리먼트를 넘겨줘야 한다. 그 다음 리엑트 엘리먼트를 root.render()로 넘긴다:

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

페이지에 "Hello,wolr"를 보여준다.

---

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

리엑트 엘리먼트는 불변하다. 엘리먼트를 한 번 만들면, 엘리먼트의 자식이나 애트리뷰트를 바꿀수 없다. 엘리먼트는 영화의 1프레임과 같이: UI의 특정한 한 포인트를 나타낸다.

 

이런 지식에 기반하여, UI를 업데이트 하는 단 하나의 방법은 새로운 엘리먼트를 만들고 그것을 root.render()에 넘기는 것이다.

 

아래 초시계 예제를 보자:

const root = ReactDOM.createRoot(
  document.getELementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

이 예제는 root.render()를 setInterval() 콜백으로 매초마다 호출한다.

Note:
실전에서, 대부분의 리앱트앱은 root.render()를 단 한번만 호출한다. 다음 섹션에서 어떻게 코드를 상태를 가진 컴포넌트로 캡슐화하는지 살펴볼 것이다.

각각의 토픽들이 서로 의존하고 있으니 스킵하지 않기를 추천한다.

---

리엑트는 필요한 곳에만 업데이트 한다

리엑트 돔은 엘리먼트와 그 자식들을 이전의 것과 비교하고, 돔을 원하는 상태로 만들기 위해 돔 업데이트가 필요한 곳에만 적용한다. 

 

이전 예제를 브라우저 툴에서 검사해서 증명할 수 있다

 

비록 매 초마다 전체 UI트리를 묘사하는 엘리먼트를 만들지만, 오직 변경되는 컨텐츠를 가지고있는 텍스트 노드만 리엑트 돔에의해 업데이트 된다.

 

우리의 경험에 비추어 봤을 때, 시간이지나면서 어떻게 변화하는지 생각하기보다, 매순간 UI가 어떻게 보여야 하는지 생각하는 것은 모든 종류의 버그를 제거한다.