UI를 트리로 이해하기

UI를 트리로

트리는 항목 간의 관계 모델이며 UI는 종종 트리 구조를 사용하여 표현됩니다. 예를 들어, 브라우저는 트리 구조를 사용하여 HTML(DOM) 및 CSS(CSSOM)을 모델링합니다. 모바일 플랫폼도 트리를 사용하여 보기 계층 구조를 나타냅니다.

브라우저 및 모바일 플랫폼처럼, React 또한 트리 구조를 사용하여 React 앱에서 컴포넌트 간의 관계를 관리하고 모델링합니다. 이러한 트리는 React 앱에서 데이터가 흐르는 방식을 이해하고 렌더링 및 앱 크기를 최적화하는 데 유용한 도구입니다.

렌더 트리

컴포넌트의 주요 기능은 다른 컴포넌트로 구성된 컴포넌트를 구성할 수 있는 능력입니다. 컴포넌트를 중첩할 때, 우리는 각 부모 컴포넌트가 다른 컴포넌트의 자식이 될 수 있는 부모 및 자식 컴포넌트의 개념을 가지게 됩니다.

트리는 각 구성 요소를 나타내는 노드로 구성됩니다. App, FancyText, Copyright 등을 예로 들 수 있습니다.

React 렌더 트리의 루트 노드는 앱의 루트 컴포넌트입니다. 이 경우 루트 컴포넌트는 App이며 React가 처음으로 렌더링하는 컴포넌트입니다. 트리의 각 화살표는 부모 컴포넌트에서 자식 컴포넌트를 가리킵니다.

렌더 트리는 React 애플리케이션의 단일 렌더 패스를 나타냅니다. 조건부 렌더링을 사용하면 부모 컴포넌트가 전달된 데이터에 따라 다른 자식을 렌더링할 수 있습니다.

앱을 업데이트하여 영감을 주는 명언이나 색상을 조건부로 렌더링할 수 있습니다.

이 예에서는 InspirationGenerator의 inspiration.type에 따라 <FancyText/> 또는 <Color/>를 렌더링할 수 있습니다. 렌더 트리는 각 렌더 패스마다 다를 수 있습니다.

렌더 트리는 렌더 패스에 따라 다를 수 있지만, 이러한 트리는 일반적으로 React 앱에서 최상위 및 리프 컴포넌트가 무엇인지 식별하는 데 도움이 됩니다. 최상위 컴포넌트는 루트 컴포넌트에 가장 가까운 컴포넌트로, 그 아래 모든 컴포넌트의 렌더링 성능에 영향을 미치며 종종 가장 많은 복잡성을 포함합니다. 리프 컴포넌트는 트리의 하단에 있으며 자식 컴포넌트가 없고 자주 다시 렌더링 됩니다.

이러한 범주의 컴포넌트를 식별하는 것은 앱의 데이터 흐름 및 성능을 이해하는데 유용합니다.

모듈 종속성 트리

React 앱에서 트리로 모델링할 수 있는 또 다른 관계는 앱의 모듈 종속성입니다. 컴포넌트와 로직을 별도의 파일로 나누면, 컴포넌트, 함수 또는 상수로 내보낼 수 있는 JS 모듈을 생성하게 됩니다.

모듈 종속성 트리의 각 노드는 모듈이며 각 브랜치는 해당 모듈의 import 문을 나타냅니다.

이전의 Inspirations 앱을 사용하면 모듈 종속성 트리, 줄여서 종속성 트리를 구축 할 수 있습니다.

트리의 루트 노드는 루트 모듈, 즉 진입점 파일로도 알려져 있습니다. 이 모듈은 종종 루트 컴포넌트를 포함하는 모듈입니다.

같은 앱의 렌더 트리와 비교할 때 비슷한 구조를 가지지만 몇 가지 중요한 차이를 나타냅니다.

• 트리를 구성하는 노드는 컴포넌트가 아닌 모듈을 나타냅니다.

• 비컴포넌트 모듈도 이 트리에 표시됩니다. 렌더 트리는 컴포넌트만을 포함합니다.

종속성 트리는 React 앱을 실행하는 데 필요한 모듈을 결정하는 데 유용합니다. 프로덕션을 위해 React 앱을 빌드할 때, 클라이언트에 전송할 모든 필요한 JavaScript을 번들로 묶는 빌드 단계가 일반적으로 있습니다. 이를 담당하는 도구를 번들러라고 하며, 번들러는 종속성 트리를 사용하여 포함할 모듈을 결정합니다.

앱이 성장함에 따라 번들 크기도 커지는 경우가 많습니다. 큰 번들 크기는 클라이언트가 다운로드하고 실행하기에 비용이 많이 듭니다. 큰 번들 크기는 UI가 그려지는 시간을 지연시킬 수 있습니다. 앱의 종속성 트리를 파악하는 것은 이러한 문제를 디버깅하는 데 도움이 될 수 있습니다.

요약

• 트리는 엔터티 간의 관계를 나타내는 일반적인 방법입니다. 종종 UI를 모델링하는 데 사용됩니다.

• 렌더 트리는 단일 렌더링에서 React 컴포넌트 간의 중첩 관계를 나타냅니다.

• 조건부 렌더링을 사용하면 렌더 트리는 다른 렌더링에서 변경될 수 있습니다. 다른 prop 값으로 컴포넌트는 다른 자식 컴포넌트를 렌더링할 수 있습니다.

• 렌더 트리는 최상위 및 리프 컴포넌트가 무엇인지 식별하는 데 도움이 됩니다. 최상위 컴포넌트는 그 아래 모든 컴포넌트의 영향을 미치며 리프 컴포넌트는 자주 렌더링됩니다. 이를 식별하는 것은 렌더링 성능을 이해하고 디버깅하는 데 유용합니다.

• 종속성 트리는 React 앱에서 모듈 종속성을 나타냅니다.

• 종속성 트리는 빌드 도구가 앱을 배포하기 위해 필요한 코드를 번들링하는 데 사용됩니다.

• 종속성 트리는 페인트 시간을 늦추고 번들링할 코드 최적화 기회를 노출하는 큰 번들 크기를 디버깅하는 데 유용합니다.