[TIL] - ScrollView vs FlatList

Dev_min·2020년 11월 13일

TIL

목록 보기

48/61

ScrollView vs FlatList 차이

: React Native에서 많은 양의 데이터를 출력할 때 사용하는 컴포넌트로서 모두 데이터가 화면을 벗어났을 때에 Scroll이 생성된다는 공통점이 있지만, 사용 용도에 차이가 있다.

`<ScrollView>`

: 데이터가 화면을 벗어났을 때 단순히 Scroll을 생성하여 사용자와의 상호작용(swipe)을 통해 벗어난 부분을 볼 수 있게 해주는 데에 그 목적이 있다. 출력해야하는 데이터가 고정적이고 양이 많지 않을 때 사용

`<FlatList>`

: 한번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분(혹은 설정한 수만큼의 데이터)만 렌더링한다는 차이가 있다.

데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우(API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용

예제

import {FlatList} from 'react-native';

const arr = [];
for (let i = 0; i < 100; i++){
  arr.push(i);
}

const App = () => {
  return (
    <FlatList
     keyExtractor={item => item.toString()}
     data={arr}
     renderItem={({item}) => <Item num={item} />}
     />
   );
};

export default App;

/* 
keyExtractor를 통해 각 요소를 구별해준다. 요소가 객체이고, 
key나 id를 이름으로하는 property가 존재하면(유니크하다면) 생략 가능
*/

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';

const Item = ({num}) => {
  console.log('Item', num);
  return (
    <View>
      <Text>{num}</Text>
    </View>
  );
};

export default Item;

<FlatList>의 windowSize props으로 인해 화면 나타는 데이터의 수와 console.log로 확인한 item 수가 다르다.
This is a convenience wrapper around <VirtualizedList>, and thus inherits its props that aren't explicitly listed here 👉 <VirtualizedList> 문서에 설명

: 초기에 렌더링되는 스크린을 기준으로 앞뒤로 추가로 렌더링시킬 스크린의 수 설정해주는 props 이다. 스크린 1개는 <FlatList> 내부에 보여지는 화면을 의미한다. default 값은 21인데, 현재 스크린을 기준으로 앞으로 10개, 뒤로 10개를 추가로 렌더링한다는 의미이다.

Scroll을 움직일 때마다 windowSize에 해당하는 모든 Item 컴포넌트를 불필요하게 재렌더링한다.