React-Native ScrollView

백승일·2020년 12월 8일
0

react-native

목록 보기
2/2

ScrollView

서론

웹에서는 콘텐츠가 컨테이너를 벗어나면 자동으로 스크롤바를 생성해주고 스크롤 할 수 있었다. 하지만 앱에서는 따로 스크롤이 되는 컨테이너를 선언해줘야한다. 바로 ScrollView 컴포넌트이다. 이 컴포넌트가 동작하기 위해선 높이값을 가져야한다. 선언하지 않으면 부모 뷰의 높이로 제한된다.

FlatList

스크롤할 수 있는 컴포넌트는 ScrollView말고도 FlatList 컴포넌트도 존재한다. 이 둘의 차이점은 바로 ScrollView컴포넌트는 아이템들을 한번에 랜더링하려 한다. 때문에 무한 랜더링이나 많은 양의 랜더링을 한번에 해결하려 하기에 아이템이 많은 경우 성능저하가 일어났수 있다.
FlatList의 경우 화면 밖으로 스크롤 되는 항목을 제거하여 렌더링을 최적화한다. lazyLoading같은 느낌

속성

  • alwaysBounceHorizontal : 스크롤의 끝에 도달하면 가로로 튕김
  • alwaysBounceVertical : 스크롤의 끝에 도당하면 세로로 튕김
  • bounces : 콘텐츠가 스크롤 방향에 따라 끝에 도달했을 때 바운스된다.
  • decelerationRate : 스크롤하다 손을 땟을 때 얼마나 빨리 스크롤 속도가 감속하는지 설정
  • disableIntervalMomentum : 스크롤해도 스크롤 뷰가 다음 인덱스에 멈춤
  • horizontal : 수직이 아닌 수평으로 리스트를 만듬
profile
뉴비 개발자

0개의 댓글