Web/Frontend

[React Native #03] ScrollView & FlatList

AllTheTech 2024. 2. 23. 16:25

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

 

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

현재 날짜 기준(2024.02.23)으로 작성된 글입니다. 버전이 다를 수 있는 점 참고 바랍니다. 이전 글 보러가기 👉 [React Native #01] React Native란 무엇일까 [React Native #01] React Native란 무엇일까 [React Native #

jamjamtest.com


[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

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

reactnative.dev

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

A performant interface for rendering basic, flat lists, supporting the most handy features:

reactnative.dev

반응형