ScrollView란?
ScrollView란, 데이터의 양이 많아 화면을 넘어가게 될 때, 스크롤이 생겨 화면을 넘길 수 있게 해주는 컴포넌트이다.
ScrollView 컴포넌트가 스크롤되어 동작하기 위해서는 높이를 제한해주어야 한다. 높이 값이 제한되지 않은 자식이 있다면 부모의 높이로 제한된다.
ScrollView VS FlatList - 어느 것을 사용할 것인가?
FlatList란 ScrollView와 비슷하게 스크롤할 수 있는 컴포넌트이다. 차이점은 모든 아이템들을 한 번에 렌더링하려는 ScrollView와는 달리, FlatList는 화면 밖으로 스크롤되는 아이템들을 제거하여 렌더링을 최적화한다.
ScrollView는 모든 구성 요소를 한 번에 렌더링하여 성능이 저하될 수 있다. 지금 당장 화면에 표시되지 않을 수도 있는 모든 JS 구성 요소와 아이템들을 한 번에 생성하여 렌더링 속도가 느려지고 메모리 사용량 또한 증가한다.
FlatList는 화면에 표시되는 해당 항목을 나타내는 순간 항목들을 느리게 렌더링(renders items lazily)하고, 메모리와 처리 시간을 절약하기 위해 화면 밖으로 스크롤되는 항목들을 제거한다.
또한, FlatList는 항목, 여러 열들, 무한 스크롤 로딩, 혹은 다른 기본 지원 기능들 사이의 구분 기호를 렌더링하는 경우에도 유용하다.
ScrollView 예시
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;주요 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
-
스크롤 표시의 스타일을 설정한다.
-
'default' : 기본
-
'black' : 스크롤 표시가 검정색이 된다. 주로 밝은 배경에 사용.
-
'white' : 스크롤 표시가 하얀색이 된다. 주로 어두운 배경에 사용.
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
- true이면 가로 스크롤 바를 표시한다.
showsVerticalScrollIndicator
- true이면 세로 스크롤 바를 표시한다.
stickyHeaderHiddenOnScroll
- true이면 아래로 스크롤 할 때에는 고정 헤더가 숨겨지고, 위로 스크롤 할 때 고정 헤더가 상단에 나타난다.
사용 방법
flashScrollIndicators()
flashScrollIndicators();
- 스크롤 바를 잠시 표시한다.
scrollTo()
scrollTo(
options?: { x?: number, y?: number, animated?: boolean } | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
);
- 주어진 x, y 오프셋으로 부드럽게 즉시 스크롤된다.
scrollToEnd()
scrollToEnd(([options]: { animated: boolean }));
- 수직 스크롤 뷰인 경우, 맨 아래로 스크롤한다. 수평 스크롤 뷰인 경우, 맨 오른쪽으로 스크롤한다.
