[React] 리액트와 리랜더링

리액트와 리랜더링

React

• 변경된 부분만 다시 그린다.
• React 앨리먼트는 불변객체(immutable)이다.
• ReactDOM.render(element, rootElement)로 전달할 뿐 변경 판단 및 반영은 리액트가 알아서 한다.

React 비교 알고리즘 (Reconciliation)

- 비교시 Virtual Dom 활용

1. element 타입이 변경되면
   • 이전 element는 버리고 새로 그린다.
2. element 타입이 같으면
   • key를 먼저 비교하고, props를 비교해서 변경사항을 반영한다.

 

바닐라JS

• 변경으로 인해 element를 다시 그린다.

 

<!--  JS -->
<!-- 모든 것이 변경 -->
<script>
  // const rootElement = document.getElementById("root");
  // const random = () => {
  //   const number = Math.floor(Math.random() * (10 - 1)) + 1;
  //   const element = `<button>${number}</button>`;
  //   rootElement.innerHTML = element;
  // };

  // setInterval(() => {
  //   random();
  // }, 1000);
</script>

<!-- React -->
<!-- 변경되는 곳만 변경 -->
<script type="text/babel">
  const rootElement = document.getElementById("root");
  const 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>