React Native ScrollView 완벽 가이드 – 세로·가로 스크롤 구현 방법과 예제 코드

ScrollView란 무엇인가?

ScrollView는 여러 개의 컴포넌트와 뷰(View)를 담을 수 있는 스크롤 컨테이너입니다. React Native의 핵심 컴포넌트 중 하나로, 이를 활용하면 콘텐츠를 세로 방향뿐 아니라 가로 방향으로도 자유롭게 스크롤할 수 있습니다.

ScrollView는 앱이 실행되는 플랫폼에 따라 네이티브 컴포넌트로 자동 매핑됩니다. 즉, Android에서는 <ScrollView>, iOS에서는 <UIScrollView>, 웹 환경에서는 <div> 요소로 변환되어 각 플랫폼에 최적화된 스크롤 성능을 그대로 누릴 수 있습니다.

자주 사용하는 주요 Props

• horizontal: true로 설정하면 가로 방향 스크롤이 활성화됩니다(기본값은 세로 스크롤).
• showsVerticalScrollIndicator / showsHorizontalScrollIndicator: 스크롤 인디케이터(스크롤바)의 표시 여부를 결정합니다.
• pagingEnabled: 스크롤이 페이지 단위로 넘어가도록 설정합니다(iOS).
• onScroll: 스크롤 위치가 변경될 때마다 호출되는 콜백 함수를 지정합니다.

예제 1: ScrollView로 세로 스크롤 구현하기

이 예제는 ScrollView 안에 View와 Text 컴포넌트를 배치하고, 전체를 외부 View로 감싼 가장 기본적인 구조입니다.

ScrollView를 사용하려면 먼저 react-native에서 해당 컴포넌트를 임포트해야 합니다.

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

ScrollView 내부에 표시할 데이터는 아래와 같이 state 객체의 names 배열에 저장합니다.

state = {
    names: [
        {'name': 'Ben', 'id': 1},
        {'name': 'Susan', 'id': 2},
        {'name': 'Robert', 'id': 3},
        {'name': 'Mary', 'id': 4},
        {'name': 'Daniel', 'id': 5},
        {'name': 'Laura', 'id': 6},
        {'name': 'John', 'id': 7},
        {'name': 'Debra', 'id': 8},
        {'name': 'Aron', 'id': 9},
        {'name': 'Ann', 'id': 10},
        {'name': 'Steve', 'id': 11},
        {'name': 'Olivia', 'id': 12}
    ]
}

this.state.names는 배열이며, map() 메서드를 사용해 각 항목의 이름을 View → Text 컴포넌트 순서로 렌더링합니다.

<ScrollView>
    {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>

ScrollView는 규모가 작은 정적 데이터를 표시할 때 가장 적합합니다. 반면, 대량의 동적 리스트를 다뤄야 한다면 FlatList 컴포넌트를 사용하는 것이 좋습니다. FlatList는 화면에 보이는 항목만 렌더링하는 가상화(virtualization) 기능을 제공하기 때문에 긴 목록에서도 성능 저하 없이 부드럽게 동작합니다.

다음은 지금까지 설명한 내용을 모두 담은 전체 코드입니다.

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from 'react-native';
class ScrollViewExample extends Component {
    state = {
        names: [
            {'name': 'Ben', 'id': 1},
            {'name': 'Susan', 'id': 2},
            {'name': 'Robert', 'id': 3},
            {'name': 'Mary', 'id': 4},
            {'name': 'Daniel', 'id': 5},
            {'name': 'Laura', 'id': 6},
            {'name': 'John', 'id': 7},
            {'name': 'Debra', 'id': 8},
            {'name': 'Aron', 'id': 9},
            {'name': 'Ann', 'id': 10},
            {'name': 'Steve', 'id': 11},
            {'name': 'Olivia', 'id': 12}
        ]
    }
    render(props) {
        return (
            <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
                <ScrollView>
                    {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
                }
                </ScrollView>
            </View>
        );
    }
}
export default ScrollViewExample;
const styles = StyleSheet.create ({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        backgroundColor: '#d2f7f1'
    }
})

실행 결과

예제 2: ScrollView로 가로 스크롤 구현하기

기본적으로 ScrollView는 데이터를 세로 방향으로 표시합니다. 가로 방향으로 표시하고 싶다면 아래와 같이 horizontal={true} 속성을 추가하기만 하면 됩니다.

<ScrollView horizontal={true}>
    {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>

전체 코드는 다음과 같습니다.

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from 'react-native';
class ScrollViewExample extends Component {
    state = {
        names: [
            {'name': 'Ben', 'id': 1},
            {'name': 'Susan', 'id': 2},
            {'name': 'Robert', 'id': 3},
            {'name': 'Mary', 'id': 4},
            {'name': 'Daniel', 'id': 5},
            {'name': 'Laura', 'id': 6},
            {'name': 'John', 'id': 7},
            {'name': 'Debra', 'id': 8},
            {'name': 'Aron', 'id': 9},
            {'name': 'Ann', 'id': 10},
            {'name': 'Steve', 'id': 11},
            {'name': 'Olivia', 'id': 12}
        ]
    }
    render(props) {
        return (
            <View style={{flex :1, justifyContent: 'center', marginTop: 100 }}>
                <ScrollView horizontal={true}>
                    {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
                }
                </ScrollView>
            </View>
        );
    }
}
export default ScrollViewExample;
const styles = StyleSheet.create ({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        height:100,
        backgroundColor: '#d2f7f1'
    }
})

실행 결과

마무리

ScrollView는 소량의 정적 콘텐츠를 손쉽게 스크롤할 수 있게 해주는 React Native의 필수 컴포넌트입니다. horizontal 속성 하나만으로 가로 스크롤도 간단히 구현할 수 있으며, 플랫폼별 네이티브 컴포넌트로 매핑되기 때문에 일관된 성능을 기대할 수 있습니다. 다만 긴 목록을 다룰 때는 FlatList를 사용하는 것이 바람직하다는 점을 꼭 기억하세요.