[React Native] FlashList(RecyclerView)에 대해

사진출처 : https://shopify.github.io/flash-list/

Flash List

https://github.com/Shopify/flash-list

npm install or yarn add @shopify/flash-list

비교적 최근에 출시된듯한 라이브러리다.

2022년 1월 알파버전으로 첫 등장하였고, 0.1버전이 2022년 3월 릴리즈 된 라이브러리이다. (Chat GPT도 모르는 라이브러리다... GPT는 21년 9월정보까지 모른다 ㅜ)

마지막 커밋도 2023.4월에 적용되었다.

일단 FlashList는 RecyclerListView를 기반으로 제작이되었다.

여기서 RecyclerListView란?

ReactNative에서 ListView를 구현하기위한 컴포넌트인데, FlatList와 비교가 되는 리스트이다.

데이터를 가변크기 항목으로 처리하기때문에, 효율적인 렌더링이 가능하다.

일단 장점으로는 3가지 정도를 들 수 있다.

1. 보이는 영역에만 집중하여 필요한 항목만 렌더링해준다. 그러니까 보이지 않는 항목들은 메모리에서 지워버린다는 뜻이 되니, 메모리 사용량이 크게 줄어들게 된다.
2. 가변크기 항목을 지원한다. 높이와 너비가 다른 가변 크기항목을 처리가 가능하다. 다양한 크기의 항목을 보다 효율적으로 표시 할수 있다.
3. 이게 가장 큰 장점이라고 본다. 재사용 가능한 뷰를 사용하여 랜더링 성능을 향상시킨다. 즉 모두 동일한 UI의 항목일 경우 첫번째 Item이 랜더링이 되게되면 그 UI를 재사용하여 빠르게 랜더링시킨다. -> 리스트를 불러오는 속도가 어마어마하게 빠르다... 정말 놀랐다.

하지만 치명적인 단점이 존재한다.

1. 러닝커브가 많이 높다. 정말 높다... 내가봐도 코드짜기가 너무 복잡하고 자칫하다간 더티코드가 되어버릴수도있겠다고 생각했다.

import React from 'react';
import { View, Text } from 'react-native';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';

const MyComponent = () => {
  const dataProvider = new DataProvider((r1, r2) => r1 !== r2);

  const layoutProvider = new LayoutProvider(
    index => {
      // 여기에서 각 항목의 높이와 너비를 동적으로 계산하거나 정적인 값을 반환할 수 있습니다.
      return { width: 100, height: 50 };
    },
    (type, dim) => {
      dim.width = 100; //항목 넓이 설정
      dim.height = 50; // 항목 높이 설정
    }
  );

  const rowRenderer = (type, data) => {
    return (
      <View>
        <Text>{data}</Text>
      </View>
    );
  };

  const data = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  return (
    <RecyclerListView
      layoutProvider={layoutProvider}
      dataProvider={dataProvider.cloneWithRows(data)}
      rowRenderer={rowRenderer}
    />
  );
};

export default MyComponent;

 

쳐다만 봐도 가독성이 떨어지는 코드에 머리가 아파온다...

하지만 FlashList가 등장하면서 RecyclerListView에 관심이 가기 시작했다.

앞서 말했듯이 FlashList는 RecyclerListView를 기반으로 제작되었다. 장점들은 모두 가져오고, 단점을 뺐다.

import { FlashList } from '@shopify/flash-list';

exprot const MyComponent = () => {
	
    const tempList = [
    	{idx : '1' , 'title' : 'title1'}
    	{idx : '2' , 'title' : 'title2'}
    	{idx : '3' , 'title' : 'title3'}
    	{idx : '4' , 'title' : 'title4'}
    ]
    
    return(
    	<FlashList
            contentContainerStyle={{padding:0,paddingBottom:20}}
            data={tempList}
            keyExtractor={(el,index)=>{ return index}}
            renderItem={({item})=>{
                return(
                    <View style={{paddingHorizontal:20,marginTop:20}}>
                        <Text>{title}</Text>
                    </View>
                )
            }}
            estimatedItemSize={600} //가변항목의 크기를 설정해줍니다.
            onEndReached={()=>{
                console.log('endOnReached Event!!!')
            }}
            onEndReachedThreshold={0.1}
		/>
    )

}

코드를 자세히 봐야한다. 이건 FlatList가 아니라 FlashList이다.

props 기능 및 이름이 FlatList와 거의 동일하여서 FlatList를 사용하던사람은 컴포넌트 이름만 바꿔줘도 바로 사용이 가능하다.

추가되는것은 estimatedItemSize라는 props가 추가되었는데, 이것은 가변항목의 크기를 설정해주면 된다.

가변항목의 크기를 설정해주게되면 Item들의 사이즈가 모두 똑같지 않아도 어느정도 입력한 사이즈로 최적화를 시켜준다.

해당 props를 넣지않으면 크리티컬한 오류는 발생하진 않지만, 경고 에러는 발생하게된다. 제작사의 권고사항이라서 넣어둔 듯하다.

ref또한 current 데이터까지 모두 동일했다.

현재 실무에 조금씩 적용을 해보는 중인데, 아직 업데이트 중이라 약간 불안할때가 있긴하다.

하지만 기초적인 기능들은 깨끗하게 잘 돌아가니, 한번 체험해보는 것도 좋다고 생각한다!