[React Native] Flatlist vs ScrollView?

✅ FlatList?

FlatList는 React에서 map함수가 하던 역할을 해주는 컴포넌트이다. 아래와 같은 방식으로 쓰인다.

export default function App() {
  const renderItem = ({item}) => {
    return <Image style={styles.image} source={{uri: item.url}} />
  }
    
  return (
    <SafeAreaView style={styles.container}>
    <FlatList
    data={data} //렌더할 데이터
    renderItem={renderItem} //실제로 렌더될 컴포넌트
    keyExtractor={item => item.id} 
      //없어도 작동은 되지만 미연의 에러방지를 위해 정의하는 것이 좋다.
      //keyExtractor는 반드시 String type이어야 한다.
    horizontal={false}
    bounces={true}
    onEndReached={onEndReached}
    onEndReachedThreshold={0.6}
    ListHeaderComponent={<Text>나는 헤더다</Text>}
    ListFooterComponent={loading&&<ActivityIndicator size={"large"}/>}
    ListEmptyComponent={<ActivityIndicator size={"small"}/>}
    />
    </SafeAreaView>
  );
}

⏩ Flatlist vs ScrollView

사실 react-native에서도 map함수를 사용할 수 있기 때문에, ScrollView와 결합하여 쓰면 flatlist와 동일한 기능을 구현할 수 있다.

그렇다면 굳이 flatlist를 써야하는 이유는 무엇일까?

ScrollView는 처리해야 할 데이터 양이 적은 경우에만 사용해야한다.
왜냐하면 ScrollView는 받아온 모든 데이터를 한번에 렌더링하기 때문이다.

반면, flatlist는 현재 화면에 보여지는 데이터만 렌더링해오기 때문에 로딩시간을 감축할 수 있다.