on
React의 중요개념 가상돔(VDOM)
Virtual DOM이란?
Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
Reconciliation 이란?
여기서 Virtual DOM의 중요 알고리즘인 Reconciliation을 조금 들여다 보았다.
위의 링크를 들어가 읽어보니 지금까지 내가 작성했던 코드들의 궁금증(?)이 조금 풀리게 되었다.
React는 state가 변할 때 마다 리렌더링이 발생하게 되는데, console.log를 찍어보면 눈에 보이는 것보다 많이 리렌더링이 발생하는 것에 놀란 적이 자주 있었다.
그때는 요즘 컴퓨터들의 성능이 좋아서 이렇게 자주 렌더링이 발생해도 문제가 없나 보구나 하고 넘어갔었다.
하지만 최근 들어 지나친 리렌더링이 발생하는 느낌이 들기 시작했었다.
리액트팀에서도 이 렌더링을 최적화 하는 것에 많은 고민을 한듯 한 느낌이 들었다.
하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있습니다. 하지만 이러한 최첨단의 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n3)의 복잡도를 가집니다.
React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트를 그리기 위해 10억 번의 비교 연산을 수행해야 합니다. 너무나도 비싼 연산이죠. React는 대신, 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현했습니다.
서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 실제로 거의 모든 사용 사례에서 이 가정들은 들어맞습니다.
O(n3)을 O(n)으로 만들어 내는 마법..
내용이 길어서 좀 더 자세한 내용은 링크로 남겨두는 것이 좋을 것 같다.
즉 리액트는 바뀌기 전 Rendering Tree와 바뀐 후 Rendering Tree를 비교하여 변경된 부분만을 다시 렌더링하는 방식을 취하고 있다.