[React Native #03] ScrollView & FlatList

이전 글 보러가기 👉 [React Native #02] Expo 프로젝트 생성

[React Native #02] Expo 프로젝트 생성

---

[React Native #03] ScrollView / FlatList

이번 포스팅에는 핵심 컴포넌트의 기능 몇 가지를 소개해보고자 합니다.

1. ScrollView

스크롤 가능한 속성을 제공하며, 스크롤 영역은 부모 컴포넌트에서 제공합니다. 

...

<View> //스크롤 영역 범위 설정
	<ScrollView> //스크롤되는 요소
    	<View>
    		<Text>Hello World!</Text>
    	</View>
        <View>
    		<Text>Hello World!</Text>
    	</View>
        <View>
    		<Text>Hello World!</Text>
    	</View>
        <View>
    		<Text>Hello World!</Text>
    	</View>
    </ScrollView>
</View>

https://reactnative.dev/docs/scrollview

ScrollView · React Native

2. FlatList

FlatList는 스크롤 가능한 목록에 적용하며, 보이는 항목만 렌더링해주기 때문에 로딩 시간을 효율적으로 분배합니다.

...

<View> //스크롤 영역 범위 설정
	<FlatList data={datas} reanderItem={itemData => {
    	return (
            <View key={itemData.item}>
                <Text>{itemData.item}</Text>
            </View>
        )}} 
        alwaysBounceVertical={false}}
    />
</View>

 

FlatList는 key를 정의할 때 객체로 넣어줌 (API 내의 'key' props의 변형이 힘든 경우, keyExtractor 프로퍼티 사용)

...
function addDataHandler(){
	setDatas((curDatas) => [
    	...curDatas, {text: enteredDataText, id: Math.random().toString()},
    ]);
} //key 대신 id객체에 랜덤한 상수값
    

<View> //스크롤 영역 범위 설정
	<FlatList data={datas} reanderItem={itemData => {
    	return (
            <View>
                <Text>{itemData.item}</Text>
            </View>
        )}
        keyExtractor={(item, index) => 
        	return item.id;
        }}
        alwaysBounceVertical={false}}
    />
</View>

https://reactnative.dev/docs/flatlist

FlatList · React Native