[React Native] ScrollView With FlatList

'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.'

ScrollView 테그와 FlatList를 같이 사용할 경우 항상 보게 되는 에러이다. 두 테그 없이 앱 개발을 하는건 불가능에 가깝기 때문에 저 에러를 그냥 방치하고 사용하는 경우도 많이 있을것이다.

오늘은 FlatList의 기능을 통해 저 에러를 지워보도록 하자.

const App = () => {
  return (
    <SafeAreaView
      style={{
        height: '100%',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <ScrollView>
        <Text
          style={{
            fontSize: 20,
            color: 'blue',
            marginBottom: 200,
            marginTop: 100,
          }}>
          ScrollView With FlatList Header
        </Text>

        <FlatList
          data={arr}
          numColumns={2}
          renderItem={({item}) => {
            return (
              <View
                style={{flex: 1, alignContent: 'space-between', width: '100%'}}>
                <Text>{item.id}</Text>
                <Text>{item.name}</Text>
              </View>
            );
          }}
        />

        <Text style={{fontSize: 20, color: 'red', marginTop: 200}}>
          ScrollView With FlatList Footer
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
};

위와 같은 코드의 경우 'VirtualizedLists' 에러가 뜨게 되는데 FlatList의 props인 ListHeaderComponent와 ListFooterComponent를 사용한다면 간단하고 쉽게 해결이 된다.

우선 FlatList의 위에 갈 컴포넌트와 아래에 갈 컴포넌트를 각각 아래와 같이 선언해준다.

  const headerItem = () => {
    return (
      <Text
        style={{
          width: '100%',
          fontSize: 20,
          color: 'blue',
          marginBottom: 200,
          marginTop: 100,
        }}>
        ScrollView With FlatList Header
      </Text>
    );
  };
  const footerItem = () => {
    return (
      <Text
        style={{
          width: '100%',
          fontSize: 20,
          color: 'red',
          marginTop: 200,
        }}>
        ScrollView With FlatList Footer
      </Text>
    );
  };

그리고 아래와 같이 ListHeaderComponent, ListFooterComponent props를 사용해준다.

        <FlatList
          data={arr}
          ListHeaderComponent={headerItem}
          ListFooterComponent={footerItem}
          numColumns={2}
          renderItem={({item}) => {
            return (
              <View style={{flex: 1, alignItems: 'center', width: '100%'}}>
                <Text>{item.id}</Text>
                <Text>{item.name}</Text>
              </View>
            );
          }}
        />

자 이제 더이상 'VirtualizedLists'에러 없이 깔끔하게 화면이 렌더링 되는것을 볼 수 있다.

개발자로 일을 시작해도 밸로그 집필을 멈추지 않겠다 다짐했지만... E-Commerce 프로젝트에 참여하게 되어 밸로그는 잠시 미뤄두게 되었다. 하지만 스토어 개발을 하면서 다양한 기술도 사용해보고 실력도 많이 늘어서 후회는 없다.

프로젝트에 참여하는 중 만나게 된 다양한 에러와 기술들이 있는데... 하나하나 해결하고 사용해보면서 밸로그에 정리를 해두면 좋겠다고 생각이 들었다. 추후 시간이 날때마다 하나하나 올려보도록 하겠다.

어제 프로젝트 배포 날이었는데 내가 만든 곳에서 사람들이 쇼핑을 하고 결제도 한다는게 너무 신기하고 기분이 좋다 !
궁금하다면 맘가이드 앱을 다운받아 스토어 탭에 들어가 본다면 확인해볼 수 있다!

오늘은 여기까지 !