[React Native] ScrollView

ScrollView

들어가며

• 리액트 네이티브(React Native)의 @ScrollView@ 컴포넌트에 대해 간단하게 정리해본다.

 

ScrollView

개념

• 스크롤 가능한 컨테이너로, 자식 컴포넌트가 화면의 크기를 넘어설 때 스크롤(Scroll)을 통해 볼 수 있게 해주는 컴포넌트
• 자식 요소들이 많거나 화면보다 커질 경우, 사용자가 스크롤해서 볼 수 있도록 만들어준다.

 

주요 속성

속성	타입	설명
@horizontal@	@boolean@	@true@로 설정 시, 가로 스크롤 가능 (기본 : 세로)
@contentContainerStyle@	@style@	내부 콘텐츠 전체에 적용할 스타일
@showsVerticalScrollIndicator@	@boolean@	세로 스크롤바 표시 여부
@showsHorizontalScrollIndicator@	@boolean@	가로 스크롤바 표시 여부
@keyboardShouldPersistTaps@	@"always"@, @"handled"@, @"never"@	키보드 열린 상태에서 탭 처리 방식 제어
@onScroll@	@function@	스크롤 이벤트 발생 시 호출되는 함수
@refreshControl@	@RefreshControl@	당겨서 새로고침(Pull-to-refresh) 기능을 추가할 때 사용

 

keyboardShouldPersistTaps

값	설명
@"never"@	탭해도 키보드 유지 (기본값)
@"handled"@	자식 컴포넌트에서 탭 처리되면 키보드가 닫힘.
@"always"@	항상 키보드 닫힘. (입력 외 영역을 탭하면 키보드가 닫힘.)

<ScrollView keyboardShouldPersistTaps="always">
  <TextInput placeholder="입력" />
</ScrollView>

 

사용 방법

import { ScrollView, Text } from 'react-native';

<ScrollView>
  <Text>항목 1</Text>
  <Text>항목 2</Text>
  <Text>항목 3</Text>
  {/* ... */}
</ScrollView>

 

ScrollView vs. FlatList

• @ScrollView@는 모든 요소를 한 번에 렌더링하기 때문에, 요소가 많으면 성능 저하가 발생할 수 있다.
• 따라서 화면을 벗어나는 소수의 요소가 있는 경우에 사용하면 좋다.
  • 화면을 벗어나는 다수의 반복 요소가 있는 경우, @FlatList@ 또는 @SectionList@를 사용하는 것이 권장된다.

	ScrollView	FlatList
렌더링	전체를 한 번에 렌더링	필요한 부분만 렌더링 (가상화)
성능	요소가 많으면 느려짐	요소가 많아도 성능이 좋음
사용 대상	고정된 UI, 짧은 목록	긴 목록, 동적 데이터
커스터마이징	단순	섹션, 헤더 등 구조화 가능

 

@ScrollView@는 간단한 스크롤이 필요한 고정된 UI에 매우 유용하며, 성능이 중요한 경우엔 @FlatList@를 이용하는 것이 좋다.

 

사용 예제

KeyboardAvoidingView와 함께 사용하기 (iOS)

<ScrollView
  contentContainerStyle={{ flexGrow: 1 }}
  keyboardShouldPersistTaps="always"
>
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    style={{ flex: 1 }}
  >
    <View style={{ padding: 20 }}>
      <TextInput placeholder="이메일" />
      <TextInput placeholder="비밀번호" />
    </View>
  </KeyboardAvoidingView>
</ScrollView>

 

⇒ 키보드가 올라와도 입력창이 가려지지 않는다. (@KeyboardAvoidingView@)

⇒ 입력 외 영역을 탭하면 키보드가 사라진다. (@keyboardShouldPersistTaps="always"@)
⇒ 화면이 작아져도 스크롤로 모든 항목에 접근이 가능하다. (@ScrollView@)

 

가로 스크롤 사용하기

• 다음과 같이 사용하면 왼쪽에서 오른쪽 방향으로 스크롤이 가능해진다.

<ScrollView horizontal>
  <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
</ScrollView>

 

참고 사이트

ScrollView · React Native

KeyboardAvoidingView · React Native