이번 글에서는 React native에서 사용하는 List 라이브러리를 소개하려 합니다.
React Native에는 List를 표현하는 방법으로 ScrollView / FlatList / SectionList 를 이용하여 구현할 수 있습니다. 보통은 FlatList를 이용하여 작업을 많이 하게 됩니다.
React Natvie에서 List 최적화 방법이 많은데, 공식문서에서도 FlatList의 최적화 방법을 소개하고 있습니다.
하지만, 성능이 좋지 못한 폰에서는 리스트가 버벅거리는 현상이 있었습니다. 그렇게 해서 레퍼런스를 찾다가 발견한 List가 recyclerListView입니다.
블로그를 통해 recyclerListView 존재하는것을 알았고, 성능상으로 FlatList보다 좋은것을 체감하게 되어 몇몇 페이지에 적용하게 되었습니다. 하지만, recyclerListView는 블로그에서 설명하듯이, 사용법이 복잡하고, renderItem 내부 컴포넌트가 내부상태값을 가지면 제대로 갱신이 안되는 버그를 가지고 있지만, 그 버그보다 최적화적으로 List를 구현할 수 있는 부분이 커서 최적화가 필요한 페이지에 사용하게 되었습니다.
[출처]https://gorapaduck.tistory.com/entry/React-Native-ScrollView-vs-FlatList-vs-RecyclerListView
그러다 최근에 FlashList를 알게 되었습니다.
FlashList는 내부적으로 recyclerListView를 가지고 있지만, 사용법이 FlatList와 같아 React Native의 FlatList를 사용해본 사람이라면 쉽게 구현할 수 있는 구조를 가지고 있습니다.
https://www.npmjs.com/package/@shopify/flash-list
https://shopify.engineering/instant-performance-upgrade-flatlist-flashlist
해외에서도 FlashList의 장점을 알려주고 있습니다.
혹시라도 React-Native 개발하시는 분들은 FlashList를 한번 사용해보시면 좋을 것 같습니다.
