React-reRender

Rerender

JavaScript 와 React 의 차이

//vanilla
function random() {
  const number = Math.floor(Math.random() * (10 - 1) + 1);
  const element = `
    <button>${number}</button>
  `;
  document.querySelector("#root").innerHTML = element;
}
random();

setInterval(random, 1000);

바닐라JS 에서는 element가 변경될때 element를 다시 그림

//react
function random() {
  const number = Math.floor(Math.random() * (10 - 1) + 1);
  const element = <button>{number}</button>
  ReactDOM.render(element, root)
}
random();

setInterval(random, 1000);

React에서는 변경되는 부분만 다시 그린다

렌더링 된 엘리먼트 업데이트하기

두 개의 트리를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교합니다. 이후의 동작은 루트 엘리먼트의 타입에 따라 달라진다.

엘리먼트의 타입이 다른 경우

두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축한다
<a>에서 <img>로, <Article>에서 <Comment>로, 혹은 <Button>에서 <div>로 바뀌는 것 모두 트리 전체를 재구축하는 경우

DOM엘리먼트의 타입이 같은 경우

같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신한다

<div className="before" title="stuff" />

<div className="after" title="stuff" />

이 두 엘리먼트를 비교하면, React는 현재 DOM 노드 상에 className만 수정한다