리액트 엘리먼트
2022-06-08
3. 리액트 엘리먼트
- 엘리먼트는 리액트 앱의 가장 작은 단위
- 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있음
- 컴포넌트와 엘리먼트 혼동 주의. 엘리먼트는 컴포넌트의 ‘구성요소’이므로 이번 장을 읽고 다음으로 넘어가갈 권장합니다.
1. DOM에 엘리먼트 렌더링
- 모든 엘리먼트를 React DOM에서 관리하기 때문에 ‘루트(root)DOM’이라 부른다.
- 리액트는 일반적으로 하나의 루트 DOM이 있는데, 리액트를 기본 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 DOM 노드가 있을 수 있다.
<div id="root"></div>
- 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 된다.
const element = <h1>hello, wolrd!</h1>;
ReactDOM.render(element, document.getElementById('root'));
2. 렌더링된 엘리먼트 업데이트
- 리액트 앨리먼트는 불변객체*이다. 엘리먼트 생성한 후 해당 엘리먼트의 자식이나 속성 변경 불가
- ※ 불변객체(immutable object) : 생성 후 그 상태를 바꿀 수 없는 객체
function tick(){
const element =(
<div>
<h1>hello, world!</h1>
<h2>Is is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
// setInterval() 콜백을 이용해 초마다 ReactDOM.render() 호출
setInterval(tick, 1000);
/*실제로 ReactDOM.render()는 한 번만 호출한다.*/
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는 데 필요한 경우에만 DOM을 업데이트 한다.