React 렌더링과 관련된 특징

React의 element는 불변객체이다.

• React의 element는 속성, 값 등을 변경할 수 없다.
• element를 변경하기 위해선 새로운 element를 render해야한다.

      const random = () => {
        // 1 ~ 10 사이의 랜덤 정수
        const number = Math.floor(Math.random() * (10 - 1) + 1);
        const element = (
          <>
            <button>{number}</button>
          </>
        );
        
        // random 함수가 호출될 때 마다 element를 rootElement에 다시 렌더한다.
        ReactDOM.render(element, rootElement);
      };

      // 1초에 한 번씩 random 함수를 호출한다. 
      setInterval(random, 1000);
    </script>

---

필요한 부분만 다시 그린다.

• VanillaJS에서 element가 변경되면, 모든 element를 다시 그린다.

• React는 element가 변경되면, 변경된 element만 다시 그린다.

• 어느 지점이 변경되었는지는 React 알고리즘으로 알아서 판단한다.

• 모든 element를 다시 구축해야하는 VanillaJS에 비해 React는 일부분만 구축하면 되기 때문에 더 빠르게 변경된 화면을 보여줄 수 있다.

---

필요한 부분만 어떻게 알지?

• 변경되기 전의 element(DOM Tree)와 변경된 후의 element(DOM Tree)를 root element를 시작으로 비교해나간다.

• 만약 element의 type이 변경되었다면, 그 element를 포함한 하위의 모든 element를 버리고 변경된 element로 재구축한다.
  ex) <div></div> -> <button></button>

• 만약 element의 속성이 변경되었다면, 동일한 속성은 유지하고, 변경된 속성만 갱신한다.
  ex) <div className="valid"></div> -> <div className="invalid"></div>

---

VirtualDOM

• React는 변경되기 전의 DOM Tree와 변경된 후의 DOM Tree를 비교하여 변경된 element를 찾는다.

• 하지만 바로 DOM에 접근하여 element를 수정한다면, 계속 리플로우가 발생하며 연산이 많아질 것이다.

• 때문에 변경 되기 전과 후의 VirtualDOM을 각각 생성하여 비교 및 변경을 마친 후, 변경이 완료된 VirtualDOM을 실제 DOM에 한번에 적용한다.