Rendering Elements(요소 렌더링)

https://reactjs.org/docs/rendering-elements.html - 번역 글

요소는 React 앱의 가장 작은 구성 블록입니다.

요소는 화면에 표시할 내용을 설명합니다.

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

브라우저 DOM 요소와 달리 React 요소는 순수한 객체이며 생성 비용이 저렴합니다. React DOM은 React 요소와 일치하도록 DOM을 업데이트합니다.

노트
요소를 "컴포넌트"라는 더 널리 알려진 개념과 혼동할 수 있습니다. 다음 섹션에서 컴포넌트에 대해 소개합니다. 요소는 구성요소가 “무엇으로” 이루어졌는지, 그리고 다음으로 넘어가기 전에 이 섹션을 읽는 게 좋습니다.

---

Rendering an Element into the DOM(DOM에서 요소 렌더링하기)

HTML 파일에 어딘가 <div>가 있다고 가정 해 보겠습니다 .

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

내부의 모든 것이 React DOM에 의해 관리되기 때문에 우리는 이것을 "루트"DOM 노드라고 부릅니다.

React로 구축한 어플리케이션은 보톤 단일 루트 DOM 노드를 가집니다. React를 기존 앱에 통합하는 경우 원하는 만큼 많은 분리된 루트 DOM 노드가 있을 수도 있습니다.

React 요소를 루트 DOM 노드에 렌더링하려면 아래와 같이 ReactDOM.render()함수에 전달하면됩니다.

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

CodePen

이제 페이지에는 "Hello, world"가 표시됩니다.

---

Updating the Rendered Element(렌더링된 요소 업데이트)

React 요소는 변경 불가능합니다. 요소를 만든 후에는 자식 또는 특성을 변경할 수 없습니다. 요소는 영화에서 단일 프레임과 같습니다. 특정 시점의 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);

CodePen

이 예제는 setInterval() 콜백을 이용해 매 초마다 ReactDOM.render() 를 호출하고 있습니다.

Note
실제로 대부분의 React 어플리케이션은 ReactDOM.render() 를 한번만 호출합니다. 다음 섹션에서는 이러한 코드가 어떻게 상태 기반 컴포넌트로 캡슐화 되는 지 배울 것입니다.
서로가 서로에게 연관성이 있기 때문에 이 주제를 건너뛰지 않는 걸 권장합니다.

---

React Only Updates What’s Necessary(React는 필요한 것만 업데이트한다.)

React DOM은 요소와 그 하위 요소를 이전 요소와 비교하여 DOM을 원하는 상태로 만드는데 필요한 DOM 업데이트만 적용합니다.

개발자 도구를 이용하여 마지막 예제를 확인할 수 있습니다 .

매 틱마다 UI 트리 전체를 설명하는 요소를 만들었지 만 내용이 변경된 텍스트 노드 만 React DOM에 의해 업데이트됩니다.

이 경험으로 볼때, 시간이 지남에 따라 UI를 변경하는 것이 아닌 주어진 순간을 UI가 어떻게 보여줘야하는 지에 대해 생각한다면 버그 전체가 사라집니다.