티스토리 뷰

프로그래밍/React Native

[React Native] ScrollView, FlatList 차이

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

TIL 22.08.28

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

 

ScrollView

https://reactnative.dev/docs/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

https://reactnative.dev/docs/flatlist

 

FlatList · React Native

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

reactnative.dev

 

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

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

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

 

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

저작자표시

'프로그래밍 > React Native' 카테고리의 다른 글

[React Native] 무한스크롤 FlatList, ScrollView  (0) 2022.08.30
[React Native] Navigator - Screen 이동  (0) 2022.08.23
[m1 mac] React Native 개발 환경 구축 Xcode - 빌드 시 주의사항, 이슈 해결, 디바이스 시뮬레이터 돌리기  (0) 2022.08.21
[React Native 태그] Touchable 요소들, TextInput  (0) 2022.08.16
React Native - (2) 기본 문법, Styling, Third Party Packages, Flex Layout  (0) 2022.08.15