[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