[ReactNative_study_8]ScrollView / Flat List

 Scroll View / Flat list 비교

--> <ScrollView>는 렌더링 시 모든 것을 한번에 렌더링한다. 많은 양의 리스트가 있을 경우 성능이 저하되는 문제를 야기할 수 있음. 

--> <FlatList>의 경우 항목이 나타나려고 할 때 렌더링을 할 수 있어 메모리의 사용량을 줄일 수 있으며, 여러열이나 무한 스크롤 로딩과도 상호작용하기 쉽다.

 

Flast list 사용법은 data props에 배열에 해당하는 data를 넣고 , renderItem  props에 실제 렌더할 컴포넌트를 넣어준다.

map을 사용하는 것과 동일하게 key를 만들어 주어야 되고 이는 keyExtractor를 통해서 가능하며 형태는 "string"을 갖는다.

ItemSeparatorComponent={() => <View style={{ height: 20 }} />} 

//와 같이 렌더링되는 component는 사이에 자동으로 separator를 줄수도 있음.


// ex) 사용예시 
const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}


// 정리

// Flat List 내에 Flast List를 사용할 수 있음

<Flat List>
// 한 행에 몇개의 열로 할지 선정할 수있음.
numColumns={3}

// 위에서 선정한 columns에서의 한 행에 대한 style을 지정할 수 있음.
columnWrapperStyle={{
justifyContent: "space-between",
}}

//* 위와 같이 한다음에 
// 들어가는 컴포넌트에 한행에 맞게 flex를 조절해야함. 지금 3개니깐 1/3 으로 대강 0.31정도
// style={{flex:0.31}}


onRefresh={ refresh 때 사용되는 함수 }
refreshing={false / true}
ListHeaderComponent={
  여기에는 Header로 사용되는 컴포넌트를 사용할 수 있다.
  여기에 Flat List를 Horizontal로 해서 Flat list를 내에 Flat list를 사용할 수 있다.
}

data={ 배열의 형태로 된 data가 들어있음}
keyExtractor={(item) => item.id + ""} - key를 만들어 주기 위해서 사용되며 string 형태를 가짐
ItemSeparatorComponent={() => <View style={{ height: 1 }} />}   -  컴포넌트 사이에 사용함.

//렌더 시킬 내용이며, data={}안에 들어있는 배열이 각각 item에 들어가서 map을 사용하는 형태와 동일하게 사용된다.
renderItem={({ item}) => {return(
              <List
                key={item.id}
                data={item.data}
                /> )}}
horizontal
showsHorizontalScrollIndicator={false}
 //FlatList는 style이아닌 contentContainerStyle을 사용
contentContainerStyle={{ paddingHorizontal: 30 }}    
      />