react-native
react native scrollView vs flatList vs RecyclerListView vs flashList
RNDK
2023. 1. 19. 10:41
기본적으로 scrollView를 많이 사용합니다. 사용되는 컴포넌트가 적고, 화면에 표시되는 양이 적지 않다면 scrollView를 사용해도 무방합니다. 하지만 많은양의 화면을 보여주어야되는 경우 적합하지 않습니다.
flatList은 대표적인 react-native api입니다. 속도는 scrollView보다 빠르며 많은 양을 보여주는데에 최적화 되어있다. scrollView에 비해서 압도적인 성능을 보여줍니다. 단점으로는 보여지지 않는 부분에 대해서 단순히 언마운트 시키는 것이므로 많은 garbage collection을 야기합니다. 적은 양의 데이터를 가지고 있음에도 빠른 scroll event 발생 시 화면 깜빡거리는 이슈가 있습니다.
RecyclerListView은 layout provider를 통해, 이를 재활용하여 데이터를 랜더링 해주는 방식입니다. 성능은 flatlist에 비해 2~3배정도 좋은 성능을 가지고 있으며 화면이 깜빡거리는 이슈가 없습니다. 단점으로는 api문서가 불친절함으로 사용하기가 어렵습니다.
flashList는 2022년에 새로 나온 api입니다. 사용 방법이나 구조는 flatlist랑 비슷하며 flatlist에 비해 6~7배의 성능을 가지고있습니다. api문서 또한 잘 나와있고 사용하기위해서는 한번쯤은 api문서를 읽어보는게 좋습니다.
알아야할 상식: estimateItemSize, fliatList와 달리 key값이 불필요.