React 렌더링

리액트는 Virtual DOM을 이용하여 DOM을 최소한으로 조작하여 성능을 높인 렌더링을 진행합니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.

이렇게 되면 실제로 DOM은 딱 한 번만 변화하기 때문에 이후에 일어나는 렌더 트리 재생성, 레이아웃 계산, 페인팅 등의 과정이 한 번만 일어나게 되므로 훨씬 효율적이라고 할 수 있습니다.

[참고] [번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가?