🗂 목차
Rendering Elements
Element는 React 앱의 가장 작은 블록 단위입니다.
Element는 화면에 표시할 내용을 기술합니다.
const element = <h1>Hello, world</h1>;
브라우저 DOM elements와 달리, React element는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM 은 DOM과 React element가 같도록 DOM을 업데이트합니다.
Rendering an Element into the DOM
HTML에 <div>
가 있다고 가정합시다.
<div id="root"></div>
이 안에 들어가는 모든 element를 React DOM이 관리하기 때문에 이것을 “root” DOM 노드 라고 부릅니다.
React로 구현된 애플리케이션은 일반적으로 하나의 root DOM 노드 가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 root DOM 노드가 생길 수 있습니다.
React element를 root DOM 노드에 렌더링 하려면 element 와 root DOM 노드를 ReactDOM.render()
의 인자로 전달하면 됩니다.
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
“Hello, world”가 화면에 표시됩니다.
Updating the Rendered Element
React element는 불변객체입니다. 한번 element를 생성 하면 그것의 자식이나 속성을 변경할 수 없습니다. element는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.
지금까지 소개한 내용을 바탕으로 하면, UI를 업데이트하는 유일한 방법은 새로운 element를 생성하고 이를 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);
이 예제는 tick()
를 setInterval()
의 콜백 함수로 1초마다 호출해서 렌더링 현재 시간을 보여주는 element를 렌더링 합니다.
React Only Updates What’s Necessary
React DOM은 현재 element와 이전 element와 비교하고 DOM을 원하는 상태로 만드는데 필요한 부분만 DOM을 업데이트합니다.
매 초마다 전체 UI를 다시 그리도록 element를 작성했지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트했습니다.
경험에 비추어 볼 때 특정 시점에 UI가 어떻게 보일지 고민하는 이런 접근법 은 시간의 변화에 따라 UI가 어떻게 변화할지 고민하는 것보다 더 많은 수의 버그를 없앨 수 있습니다.
📚 정리 및 참고 자료
- Element는 React 앱의 가장 작은 블록 단위입니다.
- React는 일반적으로 하나의 root DOM 노드를 가지고 있습니다.
- React DOM 은 현재 element와 이전 element를 비교해서 다른 부분만 업데이트 합니다.
- Element는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.