[React Native] ScrollView, FlatList 차이

프로그래밍/React Native

우징어🦑 2022. 8. 28. 02:14

TIL 22.08.28

ScrollView와 FlatList의 차이점을 알아보자

ScrollView

ScrollView · React Native

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

reactnative.dev

ScrollView renders all its react child components at once, but this has a performance downside

공식문서에 나와있다시피

ScrollView는 화면 상관없이 모든 요소를 한번에 렌더링하기 때문에 성능 저하를 야기한다.

그러므로 화면을 벗어나는 긴 텍스트, 개수가 한정된 리스트 등에 적합하다.

사용법은 이번 플젝을 진행하는 동안 익혀봐야겠다.

FlatList · React Native

A performant interface for rendering basic, flat lists, supporting the most handy features:

reactnative.dev

FlatList는 ScrollView와 달리 모든 요소를 한꺼번에 렌더링하지 않고, 현재 화면에 렌더링 될 요소만을 렌더링한다.

첫 화면에서는 해당 화면만큼의 아이템이 렌더링되고, 사용자가 아래로 스와이핑함에 따라 더 많은 아이템이 렌더링되는 것이다.

따라서 ScrollView보다 성능이 좋다.

이번 플젝에서 무한스크롤 기능이 필요한 리스트 렌더링에 사용해야겠다.