scrollView / FlatList

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;

 

참조

• 공식 React native docs (scrollView)
• ★개★발★초보★