Page 21 -

하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함

수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다.

그림 1-6 두 DOM 비교
이전 DOM 트리 새로운 DOM 트리

비교

업데이트될 DOM 노드

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한
의 연산으로 DOM 트리를 업데이트하는 것이죠.

그림 1-7 DOM 트리의 차이 확인

결국 방식 자체는 루트 노드부터 시작하여 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보
이지만, 사실 최적의 자원을 사용하여 이를 수행하는 것입니다.

리액트가 어떻게 작동하는지 큰 그림이 그려지나요? 더 구체적으로 이해하려면 다음 절에서 다룰
Virtual DOM을 알아야 합니다.

030

리액트를 다루는 기술(본문출력용)0720.indb 30 2018-07-20 오전 11:25:19