FlatList, SectionList

Tags
scroll
Column
FlatListSection List서버에서 데이터 fetch해서 보여주기FlatList 트러블슈팅
 
Resact Native는 데이터 목록을 표시하기 위한 Component 세트를 제공한다.
일반적으로 FlatList 또는 SectionList를 사용한다.
 

FlatList

FlatList 구성 요소는 변화하는 데이터의 스크롤 목록을 표시한다.
FlatList는 시간이 지남에 따라 항목 수가 변경될 수 있는 긴 데이터 목록에 대해 잘 작동한다.
 
  • 보다 일반적인 ScrollView는 모든 요소를 한번에 렌더링 했지만,
  • FlatList트는 현재 화면에 표시되는 요소만 렌더링한다.
 
FlatList component는 2개의 Props(data, renderItem)을 필요로 한다.
  • data : list에 들어갈 정보 소스
 
아래 예시는 하드코딩된 데이터로 기본적인 FlatList를 생성한 예시다.
data props에 있는 각각의 item들은 renderItem에 의해서 <Text> 컴포넌트로 렌더링된다.
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}

export default FlatListBasics;
notion image
 

Section List

데이터 집합들을 논리적인 섹션으로 나누어 렌더링하고 싶을 경우 사용
iOS의 UITableView의 모습을 떠올리면 된다.
 
import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
}

export default SectionListBasics;
 
notion image

서버에서 데이터 fetch해서 보여주기

서버에서 데이터를 가져와서 보여주려면 네트워킹과 관련된 파트를 봐야한다.
참고URL : https://reactnative.dev/docs/network
 

FlatList 트러블슈팅

Invariant Violation: Changing numColumns on the fly is not supported.
FlatList의 numColumns 값이 도중에 바뀔 수 있는 상황에러 발생하는 에러다.
예를들어 폴드 폰을 펼쳤을 때와 접었을 때 numColumns를 다르게 하고 싶은 경우가 있다.
이 때는 기존의 FlatList 컴포넌트에서 numColumns를 바꾸는 게 아니라, numColunns가 바뀌어야 한다면 다른 FlatList 컴포넌트를 만들어서 해결할 수 있도록 FlatList 컴포넌트의 key 값도 같이 바뀌도록 해주면 된다.
notion image