Understanding Your UI as a TreeUI를 트리로 이해하기

Your UI as a tree트리로 보는 UI

Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML (DOM) and CSS (CSSOM). Mobile platforms also use trees to represent their view hierarchy. 트리는 아이템 간의 관계 모델이며 UI는 트리 구조를 사용하여 표현되는 경우가 많습니다. 예를 들어 브라우저는 트리 구조를 사용하여 HTML(DOM) 및 CSS(CSSOM)를 모델링합니다. 모바일 플랫폼 또한 트리를 사용하여 뷰 계층 구조를 나타냅니다.

Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size. 브라우저 및 모바일 플랫폼과 마찬가지로 React 역시 트리 구조를 사용하여 React 앱의 컴포넌트 간의 관계를 관리하고 모델링합니다. 이 트리들은 React 앱을 통해 데이터가 어떻게 흘러가는지, 렌더링 및 앱의 크기를 최적화하는 방법을 이해하는 데 유용한 도구입니다.

The Render Tree

A major feature of components is the ability to compose components of other components. As we nest components, we have the concept of parent and child components, where each parent component may itself be a child of another component. 컴포넌트의 주요 특징은 다른 컴포넌트의 컴포넌트를 합성할 수 있다는 것입니다. 컴포넌트를 중첩하면 부모 컴포넌트와 자식 컴포넌트라는 개념이 생기며, 각 부모 컴포넌트는 그 자체로 다른 컴포넌트의 자식이 될 수 있습니다.

When we render a React app, we can model this relationship in a tree, known as the render tree. React 앱을 렌더링할 때 렌더 트리라고 알려진 트리에서 이 관계를 모델링할 수 있습니다.

Here is a React app that renders inspirational quotes. 아래는 영감을 주는 인용문을 만들어 주는 React 앱입니다.

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>
    </>
  );
}

From the example app, we can construct the above render tree. 예제 앱에서 위의 렌더 트리를 구성할 수 있습니다.

The tree is composed of nodes, each of which represents a component. App, FancyText, Copyright, to name a few, are all nodes in our tree. 트리는 노드들로 구성되어 있으며, 각 노드는 컴포넌트를 나타냅니다. App, FancyText, Copyright 등은 모두 트리의 노드입니다.

The root node in a React render tree is the root component of the app. In this case, the root component is App and it is the first component React renders. Each arrow in the tree points from a parent component to a child component. React 렌더 트리의 루트 노드는 앱의 루트 컴포넌트 입니다. 이 경우 루트 컴포넌트는 App이며 React가 렌더링하는 첫 번째 컴포넌트입니다. 트리의 각 화살표는 상위 컴포넌트에서 하위 컴포넌트를 가리킵니다.

Deep Dive | 심층 탐구

Where are the HTML tags in the render tree?렌더 트리에서 HTML 태그는 어디에 있을까요?

Show Details

You’ll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React components. 위 렌더 트리에서는 각 컴포넌트가 렌더링하는 HTML 태그에 대한 언급이 없습니다. 렌더 트리는 React 컴포넌트로만 구성되어 있기 때문입니다.

React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like UIView or FrameworkElement. UI 프레임워크인 React는 플랫폼에 구애받지 않습니다. react.dev에서는 HTML 마크업을 UI 기본 요소로 사용하는 웹으로 렌더링하는 예제를 보여줍니다. 그러나 React 앱은 UIView 또는 FrameworkElement와 같은 다양한 UI 기본 요소를 사용할 수 있는 모바일, 데스크톱 플랫폼로도 렌더링할 수 있습니다.

These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to. 이러한 플랫폼 UI 기본 요소는 React의 일부가 아닙니다. React 렌더 트리는 앱이 렌더링되는 플랫폼에 관계없이 React 앱을 제공할 수 있습니다.

A render tree represents a single render pass of a React application. With conditional rendering, a parent component may render different children depending on the data passed. 렌더 트리는 React 애플리케이션의 싱글 렌더 패스를 나타냅니다. 조건부 렌더링을 사용하면 상위 컴포넌트는 전달된 데이터에 따라 다른 하위 컴포넌트를 렌더링할 수 있습니다.

We can update the app to conditionally render either an inspirational quote or color. 영감을 주는 인용문이나 색상을 조건부로 렌더링하도록 앱을 업데이트할 수 있습니다.

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>
    </>
  );
}

In this example, depending on what inspiration.type is, we may render <FancyText> or <Color>. The render tree may be different for each render pass. 이 예에서는 Inspiration.type이 무엇인지에 따라 <FancyText> 또는 <Color>를 렌더링할 수 있습니다. 렌더 트리는 각 렌더 패스마다 다를 수 있습니다.

Although render trees may differ across render passes, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. 렌더 트리는 렌더 패스마다 다를 수 있지만 일반적으로 이러한 트리는 React 앱의 최상위 컴포넌트와 리프 컴포넌트가 무엇인지 식별하는 데 도움이 됩니다. 최상위 컴포넌트는 루트 컴포넌트에 가장 가까운 컴포넌트로, 그 아래에 있는 모든 컴포넌트의 렌더링 성능에 영향을 미치며 종종 가장 복잡한 컴포넌트를 포함합니다. 리프 컴포넌트는 트리 하단에 있으며 하위 컴포넌트가 없고 자주 리렌더링됩니다.

Identifying these categories of components are useful for understanding data flow and performance of your app. 이러한 컴포넌트들를 식별하는 것은 앱의 데이터 흐름과 성능을 이해하는 데 유용합니다.

The Module Dependency Tree모듈 의존성 트리

Another relationship in a React app that can be modeled with a tree are an app’s module dependencies. As we break up our components and logic into separate files, we create JS modules where we may export components, functions, or constants. 트리로 모델링할 수 있는 React 앱의 또 다른 관계는 앱의 모듈 종속성입니다. 컴포넌트와 로직을 별도의 파일로 분할하면서 컴포넌트, 함수 또는 상수를 내보낼 수 있는 JS 모듈을 만듭니다.

Each node in a module dependency tree is a module and each branch represents an import statement in that module. 모듈 종속성 트리의 각 노드는 모듈이고 각 분기는 해당 모듈의 import 문을 나타냅니다.

If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. 이전 Inspirations 앱을 사용하면 모듈 종속성 트리, 줄여서 종속성 트리를 구축할 수 있습니다.

The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component. 트리의 루트 노드는 entrypoint 파일이라고도 알려진 루트 모듈입니다. 루트 컴포넌트를 포함하는 모듈인 경우가 많습니다.

Comparing to the render tree of the same app, there are similar structures but some notable differences: 동일한 앱의 렌더 트리와 비교해 보면 구조는 비슷하지만 몇 가지 눈에 띄는 차이점이 있습니다:

• The nodes that make-up the tree represent modules, not components. 트리를 구성하는 노드는 컴포넌트가 아닌 모듈을 나타냅니다.

• Non-component modules, like inspirations.js, are also represented in this tree. The render tree only encapsulates components. Inspirations.js와 같은 컴포넌트가 아닌 모듈도 트리에 표시됩니다. 반면에 렌더 트리는 컴포넌트만 트리로 캡슐화합니다.

• Copyright.js appears under App.js but in the render tree, Copyright, the component, appears as a child of InspirationGenerator. This is because InspirationGenerator accepts JSX as children props, so it renders Copyright as a child component but does not import the module. Copyright.js는 App.js의 하위 노드로 나타나지만 렌더 트리에서는 Copyright 컴포넌트는 InspirationGenerator의 하위 컴포넌트로 나타납니다. 이는 InspirationGenerator가 JSX를 Child Prop으로 전달하므로 Copyright을 자식 컴포넌트로 렌더링하지만 모듈을 가져오지 않기 때문입니다.

Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a bundler, and bundlers will use the dependency tree to determine what modules should be included. 종속성 트리는 React 앱을 실행하는 데 필요한 모듈들을 결정하는 데 유용합니다. 프로덕션용 React 앱을 빌드할 때 일반적으로 클라이언트에 제공하는 데 필요한 모든 JavaScript를 번들로 묶는 빌드 단계가 있습니다. 이를 담당하는 도구를 번들러라고 하며, 번들러는 종속성 트리를 사용하여 어떤 모듈을 포함할지 결정합니다.

As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app’s dependency tree may help with debugging these issues. 앱이 성장함에 따라 번들 크기도 커지는 경우가 많습니다. 큰 번들 크기는 클라이언트가 다운로드하고 실행하는 데 비용이 많이 듭니다. 번들 크기가 크면 UI가 그려지는 시간이 지연될 수 있습니다. 앱의 종속성 트리를 이해하면 이러한 문제를 디버깅하는 데 도움이 될 수 있습니다.

Recap요약

• Trees are a common way to represent the relationship between entities. They are often used to model UI. 트리는 엔터티 간의 관계를 나타내는 일반적인 방법입니다. UI를 모델링하는 데 자주 사용됩니다.

• Render trees represent the nested relationship between React components across a single render. 렌더 트리는 단일 렌더 전반에 걸쳐 React 컴포넌트 간의 중첩 관계를 나타냅니다.

• With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. 조건부 렌더링을 사용하면 렌더 트리가 여러 렌더링에 걸쳐 변경될 수 있습니다. prop 값이 다르면 컴포넌트가 다른 하위 컴포넌트를 렌더링할 수 있습니다.

• Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance. 렌더 트리는 최상위 컴포넌트와 리프 컴포넌트가 무엇인지 식별하는 데 도움이 됩니다. 최상위 컴포넌트는 그 아래에 있는 모든 컴포넌트의 렌더링 성능에 영향을 미치며 리프 컴포넌트는 자주 리렌더링되는 경우가 많습니다. 이를 식별하는 것은 렌더링 성능을 이해하고 디버깅하는 데 유용합니다.

• Dependency trees represent the module dependencies in a React app. 종속성 트리는 React 앱의 모듈 종속성을 나타냅니다.

• Dependency trees are used by build tools to bundle the necessary code to ship an app. 종속성 트리는 빌드 도구에서 앱을 출시하는 데 필요한 코드를 묶는 데 사용됩니다.

• Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled. 종속성 트리는 페인팅 시간을 늦추고 번들로 묶인 코드를 최적화할 수 있는 기회를 제공하는 대규모 번들 크기를 디버깅하는 데 유용합니다.