Skip to main content

View Flattening

caution

이 문서는 현재 활발히 배포 중인 새로운 아키텍처를 참조합니다.

View Flattening은 React Native 렌더러가 깊은 레이아웃 트리를 피하기 위한 최적화 기법입니다.​

React API는 선언적이고 합성을 통해 재사용 가능하도록 설계되었습니다. 이는 직관적인 개발을 위한 훌륭한 모델을 제공합니다. 그러나 구현 과정에서 이러한 API의 특성은 깊은 React 엘리먼트 트리를 생성하게 됩니다. 이 트리에서 대부분의 React 엘리먼트 노드는 뷰의 레이아웃에만 영향을 미치고 화면에 아무것도 렌더링하지 않습니다. 이러한 유형의 노드를 "레이아웃 전용(Layout-Only)" 노드라고 부릅니다.

개념적으로, React 엘리먼트 트리의 각 노드는 화면의 뷰와 1:1 관계를 가집니다. 따라서 "레이아웃 전용" 노드로 구성된 깊은 React 엘리먼트 트리를 렌더링하면 성능이 저하될 수 있습니다.

다음은 "레이아웃 전용" 뷰의 비용으로 인해 영향을 받는 일반적인 사용 사례입니다.

이미지와 TitleComponent가 처리하는 제목을 렌더링하고 싶다고 가정해 보겠습니다. 그리고 이 컴포넌트를 마진 스타일이 적용된 ContainerComponent의 자식으로 포함시킵니다. 컴포넌트를 분해한 후 React 코드는 다음과 같이 보일 것입니다:

jsx
function MyComponent() {
  return (
    <View>                          // ReactAppComponent
      <View style={{margin: 10}} /> // ContainerComponent
        <View style={{margin: 10}}> // TitleComponent
          <Image {...} />
          <Text {...}>This is a title</Text>
        </View>
      </View>
    </View>
  );
}

렌더링 과정에서 React Native는 다음과 같은 트리를 생성합니다:

Diagram one

뷰 (2)와 (3)은 "레이아웃 전용" 뷰입니다. 이들은 화면에 렌더링되지만 자식 요소 위에 10px의 마진만 렌더링하기 때문입니다.

이러한 유형의 React 엘리먼트 트리의 성능을 개선하기 위해, 렌더러는 이러한 노드를 병합하거나 평탄화하는 View Flattening 메커니즘을 구현합니다. 이를 통해 화면에 렌더링되는 호스트 뷰 계층의 깊이를 줄입니다. 이 알고리즘은 margin, padding, backgroundColor, opacity 등의 속성을 고려합니다.

View Flattening 알고리즘은 렌더러의 diffing 단계에 통합되어 있습니다. 이는 이러한 유형의 뷰를 평탄화하기 위해 추가 CPU 사이클을 사용하지 않음을 의미합니다. 다른 핵심 기능과 마찬가지로, View Flattening 알고리즘은 C++로 구현되었으며 모든 지원 플랫폼에서 기본적으로 혜택을 제공합니다.

이전 예제의 경우, 뷰 (2)와 (3)은 "diffing 알고리즘"의 일부로 평탄화되고, 그 결과 스타일이 뷰 (1)에 병합됩니다:

Diagram two

이 최적화는 렌더러가 두 개의 호스트 뷰를 생성하고 렌더링하는 것을 피할 수 있게 해줍니다. 사용자 관점에서는 화면에 보이는 변화가 없습니다.