[React] Vanilla JS 와 React의 랜더링, 리액트 리랜더링 장점 알아보기

 

 

- Vanilla js - 변경으로 인해서 element를 계속 다시 그린다 

- React - 변경된 부분만 다시 그린다. 

예를 들어보자 

 Vanilla js  랜덤 숫자 돌려보기 

<div id="root"></div>
<script>
  const rootElement = document.getElementById("root");
  function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = `
      <button>${number}</button>
      <div>
        <p>${number}</p>
      </div>
    `;
    rootElement.innerHTML = element;
  }
  setInterval(random, 1000);
</script>

 

 React  랜덤 숫자 돌려보기 

<div id="root"></div>
<script type="text/babel">
  const rootElement = document.getElementById("root");
  function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = (
      <>    
        <button>{number}</button>
        <div>
          <p>{number}</p>
        </div>
      </>
    );

    ReactDOM.render(element, rootElement);
  }
  setInterval(random, 1000);
</script>

 

---

Vanilla.js 랜더링 

- 버튼 element가 새로그려지기 때문에 포커스를 잃게 된다.

 

React 랜더링

- element가 새로 만들어지는 것이 아니라 글자만 계속 변경되고 있다

 

---

React 리 랜더링의 장점을 무엇인가 

- 여러 개의 element들이 있을 때는 변경점이 있을 때마다 element가  사라졌다가 바뀌게 된다면 다른 element의 배치에 영향을 주게 된다 

프런트의 최적화를 위해 Reflow, RePaint에 있어서 React는 이점을 가질 수 있을 것이다 (부모에게서 전파가 되지 않는다!)