[React Native] FlatList와 SectionList의 차이

 

 

 

FlatList와 SectionList 모두 반복되는 비슷한 요소들, 배열의 요소들을 표현하기 위한 컴포넌트이다. 하지만 이름에서 추론할 수 있듯이 FlatList는 단일 배열을 사용하여 목록항목을 표시하고, SectionList는 섹션으로 구분된 데이터를 다룰 때 사용되는데, 그렇기 때문에 섹션은 헤더와 함께 목록 형태로 표시된다.

 

1. FlatList Component의 특징

가상화된 리스트 아이템을 제공하여 대량의 데이터를 효율적으로 처리할 수 있다. 화면에 표시되는 아이템만 렌더링되기 때문에 성능이 향상되는데, keyExtractor prop을 사용하여 각 아이템에 대해 고유키를 제공할 수 있다.

Javascript의 map 과 같은 기능이지만, 여러 유용한 props가 있기 때문에 상황에 따라map 대신 FlatList를 사용해서 데이터를 렌더링하는 것도 좋은 방법이다. 

ScrollView 컴포넌트는 컴포넌트가 감싸고 있는 모든 Component를 렌더하지만, FlatList는 화면에 보여지는 부분 또는 수동으로 설정한 양만큼만 렌더하기 때문에 데이터 길이가 가변적이거나 데이터양을 예측할 수 없을때 사용하면 좋다.

 

const flatListData = [
  { id: '1', title: 'Lion' },
  { id: '2', title: 'Tiger' },
  { id: '3', title: 'Cat' },
  // ... 더 많은 아이템
];

// FlatList 사용 예시
<FlatList
  data={flatListData}
  renderItem={({ item }) => (
    <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
      <Text>{item.title}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
/>

 

renderItem Props는 data Props로 받은 배열데이터 요소를 받아서 아이템하나하나를 렌더링해준다.

 

2. Section Component의 특징

아이템별로 분리된 섹션목록을 표현하고 싶을 때 유용한 컴포넌트이다. 사용법은 거의 FlatList와 비슷하지만 섹션을 구분하고 있기 때문에 특정 섹션의 타이틀이 될 header를 renderSectionHeader Props로 받고 있다. 

const sectionListData = [
  {
    title: 'Zoo',
    data: [
      { id: '1', title: 'Lion' },
      { id: '2', title: 'Cat' },
      // ... 더 많은 아이템
    ],
  },
  {
    title: 'School',
    data: [
      { id: '3', title: 'Mike' },
      { id: '4', title: 'Mia' },
      // ... 더 많은 아이템
    ],
  },
  // ... 더 많은 섹션
];

// SectionList 사용 예시
<SectionList
  sections={sectionListData}
  renderItem={({ item }) => (
    <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
      <Text>{item.title}</Text>
    </View>
  )}
  renderSectionHeader={({ section }) => (
    <View style={{ backgroundColor: '#e0e0e0', padding: 10 }}>
      <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
/>

 

3. FlatList 최적화하기 

FlatList로 많은 양의 데이터를 다룰 경우 성능저하가 있을 수 있다. 이를 대비하기 위해 FlatList를 최적화하여 사용하는 몇 가지 방법들을 React Native 팀에서 제안하고 있다. 

1. maxToRenderPerBatch 로 스크롤시 렌더링할 항목 명시하기
2. getItemLayout으로 요소의 높이와 너비를 (가로세로 스타일)을 미리 정의해서 레이아웃 계산 비용 줄이기
3. initialNumToRender 로 최초로 렌더할 아이템 수 지정하여 초기 렌더링 성능 향상시키기
4. renderItem Props 내에서 사용하는 인라인 익명함수 대신 외부로 useCallback을 사용하여 렌더링 함수 정의하기 -> 이렇게 하면 렌더링 함수가 호출될 때마다 함수를 다시 생성하지 않는다.

 

이러한 최적화 하는 방법에 대한 해결법은 비슷한 양상을 띄는 데 대개 계산비용을 줄이기 위해 미리 정해두기 또는 중복된 함수생성 방지 인 것 같다.