UI를 트리로 이해하기

여러 컴포넌트가 서로 중첩되면서 React 앱이 형태를 갖추어 가고 있습니다. React는 어떻게 앱의 컴포넌트 구조를 추적할까요?

React와 많은 다른 UI 라이브러리들은 UI를 트리로 모델링합니다. 앱을 트리로 생각하는 것은 컴포넌트 간의 관계를 이해하는 데 유용합니다. 이러한 이해는 성능 및 상태 관리와 같은 향후 개념을 디버깅하는 데 도움이 될 것입니다.

트리로서의 UI

트리는 항목 간의 관계 모델입니다. UI는 종종 트리 구조를 사용하여 표현됩니다. 예를 들어, 브라우저는 HTML(DOM)과 CSS(CSSOM)를 모델링하기 위해 트리 구조를 사용합니다. 모바일 플랫폼도 뷰 계층 구조를 표현하기 위해 트리를 사용합니다.

React는 컴포넌트로부터 UI 트리를 생성합니다. 이 예시에서 UI 트리는 DOM에 렌더링하는 데 사용됩니다.

브라우저 및 모바일 플랫폼과 마찬가지로 React도 트리 구조를 사용하여 React 앱의 컴포넌트 간 관계를 관리하고 모델링합니다. 이러한 트리는 데이터가 React 앱을 통해 어떻게 흐르는지 이해하고 렌더링 및 앱 크기를 최적화하는 방법을 이해하는 데 유용한 도구입니다.

렌더 트리

컴포넌트의 주요 기능 중 하나는 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있는 능력입니다. 컴포넌트를중첩할 때, 부모 및 자식 컴포넌트의 개념이 생기며, 각 부모 컴포넌트 자체가 다른 컴포넌트의 자식일 수 있습니다.

React 앱을 렌더링할 때, 이 관계를 트리로 모델링할 수 있으며, 이를 렌더 트리라고 합니다.

다음은 영감을 주는 명언을 렌더링하는 React 앱입니다.

React는 렌더링된 컴포넌트로 구성된 UI 트리인렌더 트리를 생성합니다.

예제 앱에서 위의 렌더 트리를 구성할 수 있습니다.

트리는 노드로 구성되며, 각 노드는 컴포넌트를 나타냅니다.App,FancyText,Copyright등은 모두 트리의 노드입니다.

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

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

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

조건부 렌더링을 사용하면 서로 다른 렌더링 간에 렌더 트리가 다른 컴포넌트를 렌더링할 수 있습니다.

이 예시에서, inspiration.type이 무엇인지에 따라<FancyText>나 <Color>를 렌더링할 수 있습니다. 렌더 트리는 각 렌더링 패스마다 다를 수 있습니다.

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

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

모듈 의존성 트리

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

모듈 의존성 트리의 각 노드는 모듈이며, 각 가지는 해당 모듈의import문을 나타냅니다.

이전 Inspirations 앱을 예로 들면, 모듈 의존성 트리 또는 줄여서 의존성 트리를 구축할 수 있습니다.

Inspirations 앱의 모듈 종속성 트리입니다.

트리의 루트 노드는 루트 모듈이며, 엔트리포인트 파일이라고도 합니다. 이는 종종 루트 컴포넌트를 포함하는 모듈입니다.

동일한 앱의 렌더 트리와 비교했을 때, 유사한 구조가 있지만 몇 가지 주목할 만한 차이점이 있습니다:

• 트리를 구성하는 노드는 컴포넌트가 아닌 모듈을 나타냅니다.
• 비컴포넌트 모듈들, 예를 들어inspirations.js도 이 트리에 표현됩니다. 렌더 트리는 컴포넌트만 캡슐화합니다.
• Copyright.js는 App.js아래에 나타나지만, 렌더 트리에서는Copyright 컴포넌트가 InspirationGenerator의 자식으로 나타납니다. 이는InspirationGenerator가 JSX를자식 prop으로 받기 때문입니다. 따라서 이는Copyright를 자식 컴포넌트로 렌더링하지만 해당 모듈을 임포트하지는 않습니다.

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

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

요약

• 트리는 엔티티 간의 관계를 표현하는 일반적인 방법입니다. UI를 모델링하는 데 자주 사용됩니다.
• 렌더 트리는 단일 렌더링에서 React 컴포넌트 간의 중첩된 관계를 나타냅니다.
• 조건부 렌더링을 사용하면 렌더 트리가 다른 렌더링 간에 변경될 수 있습니다. 다른 prop 값으로 인해 컴포넌트가 다른 자식 컴포넌트를 렌더링할 수 있습니다.
• 렌더 트리는 최상위 컴포넌트와 리프 컴포넌트가 무엇인지 식별하는 데 도움이 됩니다. 최상위 컴포넌트는 그 아래에 있는 모든 컴포넌트의 렌더링 성능에 영향을 미치며, 리프 컴포넌트는 자주 리렌더링되는 경우가 많습니다. 이를 식별하는 것은 렌더링 성능을 이해하고 디버깅하는 데 유용합니다.
• 종속성 트리는 React 앱의 모듈 종속성을 나타냅니다.
• 종속성 트리는 빌드 도구가 앱을 배송하는 데 필요한 코드를 번들링하는 데 사용됩니다.
• 종속성 트리는 페인트 시간을 늦추는 큰 번들 크기를 디버깅하고, 어떤 코드를 번들링할지 최적화할 기회를 찾는 데 유용합니다.