[Describing The UI] Understanding Your UI as a Tree

🧢 Your UI as a tree

---

React는 app 내의 component를 어떠한 방식으로 관리할까? Browser가 HTML과 CSS를 tree 구조인 DOM과 CSSOM으로 관리하듯이, React 역시 tree 구조를 이용한다.

💡 React creates a UI tree from the components. The UI tree is then used to render to the DOM.

👒 The Render Tree

---

React의 component 구조를 추상화한 tree를 render tree라고 칭한다.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

위를 render tree로 나타내면 아래와 같다.

Render tree의 root node는 app의 root component를 의미한다. 따라서 위의 경우에는 App component가 root component이다. 또한 parent와 child component간에는 branch가 존재한다.

그렇다면 conditional rendering의 경우 render tree는 어떻게 그려질까? 위 예시에서 <InspirationGenerator>에 conditional rendering이 생겼다고 가정하면 아래와 같은 render tree가 그려진다.

• Render tree as a summary

Render tree는 규모가 크고 복잡한 app 내에서, top-level과 leaf component를 확인하는데 많은 도움이 된다. Top level component는 root에 가까운 component들로 하위 component의 render에 영향을 주며 보다 복잡하다는 특징을 갖고 있다. Leaf component는 tree의 하단부에 존재하는 child component가 없는 component들이며 re-render될 가능성이 보다 높다.

💡 Identifying these categories of components are useful for understanding data flow and performance of your app.

Component들의 구성을 이해하는 것은 data flow와 app의 동작 원리를 이해하는데 매우 큰 도움이 된다.

• Where are the HTML tags in the render tree?

위 render tree를 보면 HTML tag가 전혀 없다는 것을 알 수 있다. 분명 FancyText나 Copyright component가 markup을 가지고 있음에도 불구하고 이들은 전혀 tree상에 전혀 나타나있지 않다.

Render tree는 React component로만 이루어진다. 그 이유는 React는 platform agnostic하기 때문이다. Web의 경우 UI primitive로써 HTML markup을 사용하고 있지만, 모바일에서는 UIView 혹은 FrameworkElement와 같은 UI primitive를 사용할 수 있다.

이러한 UI Primitive는 React에 포함되지 않는다. 따라서 공통적인 직관으로 다가가기 위해서 render tree에서 React component 외의 요소들을 제외시켜야하는 것은 자명하다.

🎓 The Module Dependency Tree

Component의 부모-자식 관계외에도 module dependency를 바탕으로 Module Dependency Tree를 구성할 수 있다. 이때 각 node는 module을 의미하며 branch는 import문을 의미한다.

위의 예시를 module dependency tree로 나타내면 아래와 같다.

Module dependency tree에서 root node는 root module, 다시 말해 entrypoint file을 의미한다. 일반적으로 해당 파일에 root component가 포함된다.

• Dependency Tree vs Render tree

• Render tree와 달리 각 node는 module을 의미하기 때문에, inspiration.js와 같은 Non-component module 또한 tree에 포함된다.

• Copyright.js와 같이 부모-자식 관계가 tree 상에 나타나지 않을 수 있다.

• Dependency tree as a summary

Dependency tree는 React app에서 어떤 module들이 필수적으로 사용되는지 확인하는데 유용하다. React app의 production 단계에서 실제로 필요한 module들을 모두 확인하는 작업을 bunder가 수행하게 되며 bundler는 dependencty tree를 이용한다.

복잡한 App일수록, 큰 크기에 bundle을 갖게 되며 이는 UI 형성을 지연시킬 수 있다. App의 dependency tree에 대해 알고있는 것이 이러한 문제를 최적화하는데 큰 도움을 줄 수 있다.