글 작성에 앞서서 리액트 공식문서를 기반으로 공부했습니다..
https://ko.reactjs.org/docs/rendering-elements.html
엘리먼트란?
리액트앱에서 가장 작은 단위.
화면에 표시할 내용을 기술하는 역할
그럼 리액트에서의 엘리먼트와 돔에서의 엘리먼트는 어떤 차이가 있을까?
일반적인 브라우저 DOM 엘리먼트가 있듯이 리액트에도 존재한다.
이 둘의 차이는 무엇일까?
리액트에서의 엘리먼트는 그냥 일반 객체이며 쉽게 생성할수 있다는점이 가장 큰 차이다.
일반적인 엘리멘트
const element = <h1>hello, sungjin </h1><div id="root"></div>이러한
이 안에 들어가는 모든 엘리먼트를 reactDOM에서 관리하기에 이것을 rootDOM 노드라고 한다고 한다.
DOM에 엘리먼트 렌더링 하기
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드를 가지고 있음 React를 기존앱에 통합하려는 경우 원하는 만큼 여러 개의 독립된 루트 DOM 노드가 있을 수 있다.
그 엘리먼트들을 루트DOM노드에 렌더링하려면 둘 다 REactDOM.render()로 전달하면 된다.
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));렌더링 된 엘리먼트 업데이트 하기
React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할수 없다.
그래서 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); 리액트 공홈에 올라와 있는 예시로 보면
똑딱 거리는 시계를 살펴보는 거로 나온다.
변경된 부분의 엘리먼트 업데이트 하기
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우만 업데이트를 한다.
https://codepen.io/gaearon/pen/gwoJeZ?editors=1010
여기에 들어가서 개발자 도구를 켜보면 텍스트로 초만 바뀌는 거를 볼수 있다.
내용이 변경된 텍스트만 업데이트 하게 된다.
