scrollView_ReactNative

데이터의 양이 많아 화면을 넘어가게 될 때, 스크롤이 생겨 화면을 넘길 수 있게 해주는 컴포넌트이다

ScrollView VS FlatList 차이점

• 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

• 스크롤 표시의 스타일을 설정한다.

• '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이면 아래로 스크롤 할 때에는 고정 헤더가 숨겨지고, 위로 스크롤 할 때 고정 헤더가 상단에 나타난다.

disableScrollViewPanResponder

• 터치에 대한 전체 제어는 하위 요소에 남는 props, 터치 비활성화
• default: false

참고블로그