React Native
scrollView / FlatList
yuhee kim
2022. 1. 20. 20:42
scrollView 와 FlatList 모두 화면에 많은 양의 데이터를 나타내고자 할 때 사용되는 컴포넌트이다.
공통점
- 데이터가 많아 화면을 넘어가려할 때 화면에 스크롤을 만들어준다.
차이점
- ScrollView
처리해야 할 데이터의 양이 적은 경우에만 사용
ScrollView의 경우 ScrollView에 속한 자식 컴포넌트들을 한 번에 렌더링한다.
따라서, ScrollView를 이용하여 많은 양의 데이터를 나타내려고 하면 속도와 성능이 저하된다.
한 번에 많은 데이터를 처리하려 하고 상당한 메모리를 잡아먹기 때문이다.
- FlatList
데이터의 길이가 유동적일 때/알 수 없을 때 사용
FlatList의 경우 ScrollView와 다르게 렌더링이 느리게 된다.
또한, 화면 밖에 있어 나오지 않는 항목들은 삭제한다.
한 번에 모든 데이터를 렌더링하지 않고 초기에는 적절한 양만 렌더링한다.
사용자가 Scroll을 움직일 때마다 추가적으로 렌더링하는 방식이다.
그렇기 때문에 메모리를 절약할 수 있고 성능 향상이 된다.
예제
- ScrollView
위 화면에 해당하는 코드는 아래와 같습니다.
import React from 'react';
import {
StyleSheet,
Text,
ScrollView,
} from 'react-native';
const Scroll = () => {
return(
<ScrollView>
<Text style={stlyes.main}>항목1</Text>
<Text style={stlyes.main}>항목2</Text>
<Text style={stlyes.main}>항목3</Text>
<Text style={stlyes.main}>항목4</Text>
<Text style={stlyes.main}>항목5</Text>
<Text style={stlyes.main}>항목6</Text>
<Text style={stlyes.main}>항목7</Text>
<Text style={stlyes.main}>항목8</Text>
<Text style={stlyes.main}>항목9</Text>
<Text style={stlyes.main}>항목10</Text>
<Text style={stlyes.main}>항목11</Text>
<Text style={stlyes.main}>항목12</Text>
<Text style={stlyes.main}>항목13</Text>
<Text style={stlyes.main}>항목14</Text>
<Text style={stlyes.main}>항목15</Text>
<Text style={stlyes.main}>항목16</Text>
<Text style={stlyes.main}>항목17</Text>
<Text style={stlyes.main}>항목18</Text>
</ScrollView>
)
}
export default Scroll;
const stlyes = StyleSheet.create({
main:{
paddingHorizontal:10,
paddingVertical:30,
textAlign:'center',
},
})- FlatList
위 화면에 해당하는 코드는 아래와 같습니다.
import React from 'react';
import {
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
const Flat = () => {
return (
<View>
<FlatList
data={[
{key: '항목1'},
{key: '항목2'},
{key: '항목3'},
{key: '항목4'},
{key: '항목5'},
{key: '항목6'},
{key: '항목7'},
{key: '항목8'},
{key: '항목9'},
{key: '항목10'},
{key: '항목11'},
{key: '항목12'},
{key: '항목13'},
{key: '항목14'},
{key: '항목15'},
{key: '항목16'},
{key: '항목17'},
{key: '항목18'},
]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
};
const styles = StyleSheet.create({
item:{
padding: 10,
fontSize: 20,
},
});
export default Flat;
참조