🗂 목차
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를 보여줍니다.
