[ReactNative] <FlatList> 와 <ScrollView>

Today, What I Learned?

리액트 네이티브 공식문서의 ScrollView를 보다가 <FlatList/> 와의 비교하는 부분이 있어 정리해 보고,

현재 만들고 있는 영화 앱의 ScrollView 부분을 FlatList로 바꿔보는 작업을 기록해두려 한다.

 

 

<ScrollView> vs <FlatList>

위 캡처는 리액트 네이티브 공식 문서에서 발췌해온 부분이다.

 

살펴보면 대략 이런 내용이다.

• ScrollView는 렌더 시에 모든 자식 컴포넌트들을 한 번에 가져와서 성능이 저하된다.
• FlatList는 렌더 시에 보이는 것들만 lazily하게 가져오고, 스크롤을 내려야 볼 수 있는 아이템들은 지워버리기 때문에 메모리와 처리 시간을 절약할 수 있다.

 

<FlatList/>

FlatList는 여러 기능을 내장하고 있다.

• 헤더 / 푸터 지원
• horizontal mode 지원
• 내려 당겼을 때의 Refresh 지원
  등등...

가장 큰 특징은 map 메서드를 내장하고 있다는 것이다.

그래서 필수적으로 전달되어야 하는 props가 있다.

• data : 렌더링 되어야 할 배열
• renderItem : 어떻게 렌더링 할 것인지? (map 메서드의 콜백함수 부분에 해당)
  • 콜백함수 내에서 매개변수 이름은 item 이어야 한다는 규칙이 있다!
• keyExtractor : map 메서드의 key 부분

 

이제 코드를 리팩토링 해보는 과정!

 

기존 코드

  <ScrollView>
      ...
      <ScrollView>
        {data?.videos?.results.map((item) => (
          <VideoWrapper onPress={() => onPress(item.item.key)}>
            <AntDesign name="youtube" size={24} color={isDark ? '#fff' : '#333'} />
            <VideoTitle numberOfLines={1}>{item.item.name}</VideoTitle>
          </VideoWrapper>
        ))}
      </ScrollView>
    </ScrollView>

ScrollView 안에 또다른 ScrollView가 있는 상태.

VideoWrapper 안에 들어가는 데이터들은 각각 다르긴 했지만, 데이터의 수가 15개 가까이 되는 경우도 있었다.

 

이제 FlatList로 좀 더 효율적이게 리팩토링 해보기 🤔

 

수정한 코드

  <FlatList
      ListHeaderComponent={
        <>
          ...
        </>
      }
      data={data?.videos?.results}
      renderItem={(item) => <VideoItem item={item.item} onPress={openYoutube} />}
      keyExtractor={(item) => item.id}
      ItemSeparatorComponent={<View style={{ marginBottom: 6 }} />}
    />

렌더링 할 부분을 제외한 위쪽 코드들은 ListHeaderComponents라는 props에 넣어주면 해결할 수 있다.
또 수정하고 나니 renderItem 안에 들어가는 코드의 양을 줄여달라는.. 그런 경고가 떠서 해당 부분을 컴포넌트화 했다.

 

 

또 코드를 짜다 보니 이런 에러도 만났었다.

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

이 에러는 ScrollViews 안에 FlatList를 쓸 수 없다는 오류였다.

VisualizedLists의 종류로 SectionList와 FlatList가 있는데, 이 리스트들은 모두 콘텐츠 양이 많은 리스트들을 렌더링 할 때 메모리 소비를 감소시키고 퍼포먼스를 향상한다.

순수한 ScrollViews 안에 List가 있을 경우 현재 스크린에서의 메모리 계산이 어려워지기 때문에 이런 에러가 뜨는 것 같다.

 

 

  <FlatList
    ...
      ListHeaderComponent={
        <>
        ...
          <FlatList
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={{ paddingHorizontal: 20 }}
            ItemSeparatorComponent={<View style={{ width: 10 }} />}
            data={topLatedMovies}
            renderItem={({ item }) => <TopMovieItem movie={item} />}
            keyExtractor={(item) => item.id}
          />
          <Title>UpComing Movies</Title>
        </>
      }
    ...
    />

그래서 위와 같은 형태로 중첩하여 사용했다.

 

 

 

몇 번 사용하다 보니 한결 익숙해진 듯한 FlatList... 프로젝트 때도 잘 써볼 수 있길 바라며.. 이번 글을 마친다.😇

 

 

참고글

https://javascript.plainenglish.io/how-to-fix-virtualizedlists-should-never-be-nested-inside-plain-scrollviews-warning-3a2a887b4ea0

How to Fix ‘VirtualizedLists should never be nested inside plain ScrollViews’ Warning