플러터를 조금 깊게 들어가다 보면 마주치게 되는 세 가지 트리가 있다. 바로, Widget Tree, Element Tree, 그리고 Render Tree이다. 개발자로서 Widget Tree는 익숙하지만, 다른 두 트리에는 생소한 것이 현실이다. 이번에 세 가지 트리를 알아보고, 차이점을 비교해보고자 한다.

1. Widget Tree

위젯 트리는 개발자가 작성하는 플러터의 핵심 구성 요소이다. 실제로 보이는 코드 그 자체로 위젯 트리를 형성하기에 가장 이해하기가 쉽다고 하겠다. 위젯 트리에서는 위젯들이 마치 나무의 뿌리를 뻗어나가듯 밑으로 확장된 형태를 가진다. 부모와 자식 위젯들이 서로 계층적으로 표현된 형태라고 할 수 있겠다.

위젯 트리의 가장 도드라지는 특징은 바로 불변성이다. 위젯은 한 번 생성되면 변경되지 않는다. 만약, 상태 변화가 필요하면 새로운 위젯을 생성해야 한다. 물론, 다행히도 생성과 파괴에 드는 비용이 적어, 잦은 변경에 효율적이기는 하다.

2. Element Tree

엘리먼트 트리는 위젯 트리와 렌더 트리 사이의 연결 고리 역할을 한다. 위젯의 설정 정보와 상태를 관리하며, 라이프사이클(Lifecycle)을 담당하는 녀석이기도 하다. 위젯 트리와의 가장 큰 차이점은 아무래도 가변성일 것이다. 위젯 트리와는 다르게, 엘리먼트 트리는 변경 사항이 감지되면, 필요한 부분만을 효율적으로 업데이트한다. 즉, 필요하다면 위젯을 재사용(Reuse)한다.

3. Render Tree

렌더 트리는 실제 화면에 뿌려지는 UI를 담당한다. 위젯의 크기와 위치를 계산하여 화면에 배치하여 렌더링한다. 렌더 트리는 엘리먼트 트리와 마찬가지로 재사용성(Reusability)을 큰 특징으로 갖는다. 즉, 필요한 부분만을 선택적으로 렌더링하여 성능을 최적화할 수 있다.

세 트리의 가장 두드러지는 차이점이라면 아무래도 가변성과 불변성일 것이다. 위젯 트리의 위젯들은 불변하여, 새로운 상태 변화가 감지되면 위젯 자체를 허물고 새로운 위젯을 생성하는 반면, 나머지 두 트리(엘리먼트 트리, 렌더 트리)에서는 위젯들의 상태 변화에 유연하게 대처하여, 전체적인 위젯은 재사용을 하고, 필요한 부분만을 렌더링한다.

각 트리의 특징을 한 마디로 설명하자면, 위젯 트리는 잦은 위젯의 생성과 파괴에 대처하기 위해 가볍게 디자인되었고, 엘리먼트 트리는 필요한 부분만을 렌더링하기 위해 효율적인 업데이트를 지향하도록 디자인되었다. 마지막으로 렌더 트리는 실제 화면에 보이는 부분을 담당하기 위해 렌더링을 최적화하도록 디자인되었다고 할 수 있겠다.