RN ScrollView vs. FlatList

스크롤뷰는 전체 UI가 렌더링 될 떄마다 안에 있는 항목을 전부 렌더링한다.

그래서 목록이 아주 길다면 성능에 문제가 생길 수 있다.

대체는 FlatList
세부기능을 확인해 보면 보이는 항목만 렌더링하고 화면 밖의 항목은 사용자가 스크롤해야  로딩 및 렌더링된다.

<ScrollView>
    {list.map((item: string, idx: number) => {
        return (
            <View key={idx}>
            	<Text>{item}</Text>
            </View>
        );
    })}
</ScrollView>

FlasList로 변환하는 작업

커스텀매핑 지우고 프로퍼티로 추가한다.
데이터를 수동으로 매핑하는 대신 해당 작업을 flatlist로 전달해서 필요한 사항만 렌더링하는 방식으로  목록을 효율적으로 렌더링한다.

data property
목록에서 출력할 데이터를 지정하는 역할
{list.map(()=>)} 에서 list부분

renderItem property
개별 데이터 항목을 렌더링하는 방법을 flatlist에 지시하는 함수를 값으로 받는 프로퍼티

사용자가 스크롤 해서 새 항목을 렌더링할 때 할 때 함수를 호출한다.

함수 매개변수는 개별 데이터이고 데이터마다 item과 index가 객체로 부여된다.

 

keyExtractor property

매핑하는 요소들 마다 키값 부여

 

<FlatList
    data={courseGoals}
    renderItem={(renderItem) => {
        return (
            <View>
                <Text>{renderItem.item}</Text>
            </View>
        );
    }}
    keyExtractor={(item, index: any) => {
    	return index;
    }}
/>

https://reactnative.dev/docs/flatlist

FlatList · React Native