React
[React] React Element
ui-o
2023. 10. 15. 14:59
반응형
React Element
: 리액트 앱의 가장 작은 단위로 화살표에 표시할 내용을 기술
- DOM을 그대로 반영
DOM에 엘리먼트 렌더링
- React로 구현된 애플리케이션은 기본적으로 하나의 루트 DOM 노드가 있음
<div id="root"></div>
렌더링 순서
- ReactDOM.createRoot()에 DOM 엘리먼트 전달
- React 엘리먼트를 root.render()에 전달
const root = ReactDOM.createRoot(
document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);
렌더링 된 엘리먼트 업데이트
React 엘리먼트는 기본적으로 생성한 뒤 자식이나 속성을 변경할 수 없음.
이를 변경하기 위해서는 새로운 엘리먼트를 생성하여 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);
반응형