데이터의 양이 많아 화면을 넘어가게 될 때, 스크롤이 생겨 화면을 넘길 수 있게 해주는 컴포넌트이다
- FlatList란 ScrollView와 비슷하게 스크롤할 수 있는 컴포넌트이다.
- 차이점은 모든 아이템들을 한 번에 렌더링하려는 ScrollView와는 달리, FlatList는 화면 밖으로 스크롤되는 아이템들을 제거하여 렌더링을 최적화한다.
- ScrollView는 모든 구성 요소를 한 번에 렌더링하여 성능이 저하될 수 있다. 지금 당장 화면에 표시되지 않을 수도 있는 모든 JS 구성 요소와 아이템들을 한 번에 생성하여 렌더링 속도가 느려지고 메모리 사용량 또한 증가한다.
- FlatList는 화면에 표시되는 해당 항목을 나타내는 순간 항목들을 느리게 렌더링(renders items lazily)하고, 메모리와 처리 시간을 절약하기 위해 화면 밖으로 스크롤되는 항목들을 제거한다.
- 또한, FlatList는 항목, 여러 열들, 무한 스크롤 로딩, 혹은 다른 기본 지원 기능들 사이의 구분 기호를 렌더링하는 경우에도 유용하다.
사용법
<ScrollView
contentContainerStyle={styles.scroll}
>
...
</ScrollView>
styles = StyleSheet.create({
scroll: {
borderBottomColor: "black",
borderStyle: "solid",
borderBottomWidth: 3,
},
Props
StickyHeaderComponent
- 고정 헤더를 렌더링하는 경우, stickyHeaderIndices와 함께 사용해야 한다. 고정 헤더에 사용자 정의 변환(애니메이션이나 숨길 수 있는 헤더를 포함시키는 경우 등)을 사용하는 경우에 해당 컴포넌트 설정이 필요하다. 설정하지 않은 경우, 기본적으로 ScrollViewStickyHeader 컴포넌트가 설정된다.
alwaysBounceHorizontal
- true면 콘텐츠가 ScrollView보다 작더라도 스크롤 뷰가 끝에 도달하면(끝까지 스크롤 했을 때) 수평으로 바운스된다.
alwaysBounceVertical
- true면 콘텐츠가 ScrollView보다 작더라도 스크롤 뷰가 끝에 도달하면(끝까지 스크롤 했을 때) 수직으로 바운스된다.
bounces
- true이면 내용이 화면 크기 보다 큰 경우, 스크롤이 내용 끝에 도달했을 때 바운스된다.
bouncesZoom
- true이면 손가락 제스쳐를 통해 최소/최대 크기를 넘어 확대/축소할 수 있고, 확대/축소 제스처를 놓았을 때 해당 화면의 최소/최대 값으로 돌아간다. false이면 확대/축소 제스쳐가 최소/최대 제한 크기를 초과하지 못한다.
centerContent
- true이면 콘텐츠가 스크롤 뷰보다 작을 경우 콘텐츠는 자동으로 중앙에 배치된다. 내용이 스크롤 뷰보다 크면 효과가 없다.
decelerationRate
- 사용자가 손가락으로 스크롤하다 뗀 뒤, 스크롤 뷰가 얼마나 빨리 감속되는지 결정한다. 'fast', 'normal, 혹은 부동 소수점 숫자를 사용한다. 기본은 normal.
endFillColor
- 콘텐츠가 채워진 공간보다 스크롤 뷰가 더 많은 공간을 차지할 경우, 배경 설정 및 불필요한 overdraw 생성 방지를 위해 나머지 스크롤 뷰 공간을 색상으로 채운다.
horizontal
- true이면 해당 스크롤뷰의 자식들은 행 대신 열 순서로, 수직에서 수평으로 배열된다.
indicatorStyle
keyboardDismissMode
-
화면을 스크롤할 때 키보드를 닫을지 여부를 결정한다.
-
'none' : 스크롤해도 키보드가 닫히지 않는다.
-
'on-drag' : 스크롤이 시작되면 키보드가 사라진다.
keyboardShouldPersistTaps
-
화면을 탭했을 때, 키보드가 계속 표시되어야 하는지 결정한다.
-
'never' : 키보드가 열려있을 때, 현재 포커스된 텍스트 입력 칸의 외부를 탭하면 키보드가 닫힌다.
-
'always' : 키보드는 자동으로 닫히지 않는다. 이때 스크롤 뷰는 탭에 영향받지 않지만, 스크롤 뷰의 자식은 탭에 영향받는다.
-
'handled' : 스크롤 뷰의 자식이 탭된 경우, 키보드는 자동으로 닫히지 않는다.
-
기존의 false, true는 각각 'never'과 'always'로 대체됨.
maximumZoomScale / minimumZoomScale
-
최대 / 최소 허용 배율을 지정한다.
-
기본은 1.0
onScroll
- 스크롤 하는 동안에 프레임 당 최대 한 번 실행된다. 이벤트 빈도는 scrollEventThrottle prop을 이용하여 제어 가능하다.
onScrollBeginDrag
onScrollEndDrag
- 스크롤 뷰를 스크롤하는 것을 멈춰 스크롤 뷰가 멈추거나 미끄러질 때 호출된다.
onScrollToTop
- 상태 표시줄을 탭한 뒤, 스크롤 뷰가 맨 위로 스크롤 될 때 발생한다.
overScrollMode
-
overScroll 모드의 기본 값을 재정의한다.
-
'auto' : 콘텐츠가 스크롤할 의미가 있을 정도로 큰 경우에만 오버스크롤이 가능하게 한다.
-
'always' : 항상 오버스크롤이 가능하게 한다.
-
'never' : 해당 뷰의 오버스크롤을 허용하지 않는다.
persistentScrollbar
- true이면 스크롤바가 사용되지 않을 때에도 표시된다.
scrollToOverflowEnabled
- true이면 스크롤 뷰를 컨텐츠의 크기 이상으로 스크롤할 수 있다.
scrollsToTop
- true이면 상태 표시줄을 탭하면 스크롤 뷰의 맨 위로 스크롤된다.
showsHorizontalScrollIndicator
showsVerticalScrollIndicator
stickyHeaderHiddenOnScroll
- true이면 아래로 스크롤 할 때에는 고정 헤더가 숨겨지고, 위로 스크롤 할 때 고정 헤더가 상단에 나타난다.
disableScrollViewPanResponder
- 터치에 대한 전체 제어는 하위 요소에 남는 props, 터치 비활성화
- default: false
참고블로그