[RN] 앱을 만들어보자, React Native! - List .03

안녕하세요 RyuWoong 입니다.

앞서 포스팅한 글 중 Component를 소개하는 글이 있었죠?

거기서 RN은 Web과 다르게 Scroll을 하기 위해서 List Compnent가 존재한다고 했습니다!

크게 Scroll View와 Virtualized List로 나누어지는데요.

한번 알아봅시다.

---

Scroll View

먼저 Scroll View에 대해 알아봅시다.

Scroll View는 단순하게 Scroll 기능이 추가된 View입니다.

물론 Scroll 기능이 추가되면서 View보다 더 많은 Props를 지원합니다. 자세한 사항은 RN 공식 문서를 참조해주세요.

어떨 때 사용하냐면, Page에서 Height가 긴 시안을 표현하면서 반복되는 요소가 없다면 사용합니다.

왜냐하면 Scroll View 내 자식 Component들이 한꺼번에 렌더링 되기 때문입니다.

<ScrollView>
	... // 내부에 있는 Component들이 한꺼번에 Rendering된다.
</ScrollView>

만약 엄청 긴~ 목록의 상품리스트들을 Scroll View를 사용하여 뿌린다면, 흰 화면이 꽤나 오랫동안 보이게 됩니다. 또 저사양 폰에서는 버벅임이 발생하기도 합니다.

Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

- 공식 문서 발췌

제가 사용하는 경우는 메인 또는 폼 화면 같은 키보드가 필요한 화면 등에서 사용합니다.

키보드를 사용하게 되면 KeyboardAvoidingView를 함께 사용해야합니다. 이 내용은 다음에 포스팅 해보도록 할게요!

 

Virtualized List

무한 스크롤 또는 배너 같은 반복되는 데이터 리스트를 나열해서 보여줘야하는 경우 최적화를 위해 아래 두 Component를 사용하는게 좋습니다! 잘 사용한다면 메모리 관리에 효율적인 List입니다.

 

Flat List

Scroll View보다 더 많은 편의기능!을 지원하는 멋진 List Component 입니다.

• Fully cross-platform.
• Optional horizontal mode.
• Configurable viewability callbacks.
• Header support.
• Footer support.
• Separator support.
• Pull to Refresh.
• Scroll loading.
• ScrollToIndex support.
• Multiple column support.

- 공식문서 발췌

기본적으로 아래와 같이 작성하면 바로 사용할 수 있습니다.

keyExtractor는 최적화를 위한 고유한 key임으로 index보다 고유한 ID를 사용할 수 있도록 하는 것에 유의해주세요.

   <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />

FlatList는 보이는 영역 외 부분을 메모리에서 제거하여 알아서 최적화 해줍니다.

하지만 단점으론 빠르게 스크롤 했을 경우 렌더링 되지 않은 부분으로 인해 빈 영역이 나타날 수 있습니다.

최적화에 특성이 있는 List인 만큼 최적화와 관련된 Props들이 있는데 적당히 조절하여 사용할 수 있습니다.

 

getItemLayout

- 렌더될 아이템의 크기나 위치를 미리 명시하여 최적화에 도움을 줍니다. 크기가 고정적인 아이템을 렌더링 한다면 명시하여 성능을 크게 향상시킬 수 있습니다.

 

initialNumToRender

- 최초에 몇 개를 Rendering할지 정할 수 있습니다. 기본 값은 10개이며, 만약 각 아이템의 크기가 크다면, 화면을 채울 정도로만 갯수를 줄여 초반 렌더링 성능을 향상 시킬 수 있습니다.

 

removeClippedSubviews

- 화면에 벗어난 아이템을 unMount시켜 메모리 관리를 도와줍니다. List가 크면 효율이 증가합니다, Android 같은 경우 true로 설정되어 있습니다. 하지만 일부 항목이 누락 되는 버그가 발생할 수 있습니다.

 

maxToRenderPerBatch

- 한번에 몇 개씩 렌더링 할지 조절할 수 있습니다. 만약 렌더 갯수가 높다면 빠르게 화면상에 내용을 채울 수 있지만, 렌더 시간이 길어짐으로 다른 액션에 Delay가 생기거나 방해가 될 수 있습니다.

 

windowSize

- 표시 영역 외부에 렌더링되는 최대 항목 수를 표시 가능한 길이 단위로 결정합니다. 기본 값을 21로 화면 영역에 뷰포트 위에 최대 10개, 아래에 최대 10개의 화면을 추가하여 렌더링합니다. 이 숫자를 줄이면 메모리 소비가 감소하고 성능이 향상될 수 있지만 빠르게 스크롤하면 렌더링되지 않은 콘텐츠의 순간적인 빈 영역이 나타날 가능성이 증가합니다.

 

Section List

Section이 필요한 경우 사용할 수 있습니다! 만약 Section이 필요 없다면 FlatList가 더 좋은 선택지 입니다.

아래와 같이 작성할 수 있으며 rednerSectionHeader라는 Props로 리스트를 쪼개 Header를 달 수 있습니다.

    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />

그외 기본적인 내용은 FlatList와 비슷합니다.

 

VirtualizedList

위 List들의 부모 Component라고 할 수 있습니다.

Flat List보다 더 많은 유연성을 요구할 때 getItem, getItemCount Props를 이용하여 사용 할 수있습니다.

사용한 경험이 없어 딱히 적을 내용이 없네요. 앞선 두 List Component면 대부분의 상황에서 충분하기 때문입니다.

 

결론.

Scroll View를 사용하는 사례를 제외하면 대부분 경우에 FlatList를 이용 하는 것이 웬만하면 좋습니다.