ScrollView — 개요, 스크롤 컨테이너 및 React Native

React Native에서 ScrollView란

ScrollView는 콘텐츠를 스크롤 가능한 컨테이너로 감싸는 React Native 컴포넌트입니다. 콘텐츠가 화면 경계를 초과하면 사용자가 세로 또는 가로로 스크롤할 수 있습니다. ScrollView는 마운트 시 모든 자식 요소를 렌더링하며, 화면에 보이는지 여부와 관계없습니다.

보이는 요소만 렌더링하는 FlatList(지연 렌더링)와 달리 ScrollView는 즉시 모든 네이티브 뷰를 생성합니다. 따라서 ScrollView는 폼, 설정 페이지, 한 화면의 제품 카드 등 자식 요소 수가 적거나(최대 20-30개) 정확한 개수를 미리 알 수 없는 경우에 편리합니다.

React Native Using ScrollView, 2024에 따르면, ScrollView는 중첩 스크롤(예: ScrollView 안의 ScrollView), 가장자리 도달 시 바운스 효과, 스크롤 표시기, 스냅 위치 지정 및 제스처 처리를 지원합니다. iOS에서 ScrollView는 contentInsetAdjustmentBehavior를 통해 SafeArea 패딩을 자동으로 추가합니다.

ScrollView 컴포넌트 속성 및 API

ScrollView는 스크롤 동작, 모양 및 상호작용을 제어하기 위한 풍부한 속성 세트를 제공합니다. 주요 그룹을 살펴보겠습니다: 스크롤 제어, 시각적 설정, 이벤트 및 플랫폼별 기능.

방향 및 스크롤 제어

horizontal — 스크롤 방향을 세로(기본값)에서 가로로 전환합니다. scrollEnabled — 필요 시 스크롤을 비활성화합니다. showsVerticalScrollIndicator와 showsHorizontalScrollIndicator는 스크롤 표시기 표시를 제어합니다. bounces(iOS)는 콘텐츠 가장자리에 도달할 때 바운스 효과를 활성화/비활성화합니다.

ScrollView 이벤트

주요 이벤트는 onScroll로, 스크롤할 때마다 발생하며 contentOffset(현재 위치), contentSize(콘텐츠 크기), layoutMeasurement(보이는 영역 크기)를 포함하는 nativeEvent가 있는 객체를 전달합니다. onMomentumScrollEnd는 관성 스크롤 완료 후 발생합니다. onScrollEndDrag — 사용자가 화면에서 손가락을 뗄 때 발생합니다. 이러한 이벤트는 무한 스크롤, 패럴랙스 효과 및 지연 로딩을 구현하는 데 사용됩니다.

ref를 통한 프로그래밍 방식 제어

ScrollView는 ref를 통한 프로그래밍 방식 제어를 위한 메서드를 제공합니다: scrollTo({x, y, animated})는 지정된 좌표로 스크롤하고, scrollToEnd({animated})는 콘텐츠 끝으로 스크롤하며, flashScrollIndicators()는 스크롤 표시기를 일시적으로 표시합니다.

const scrollRef = useRef(null);

// 맨 위로 스크롤
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// 끝까지 스크롤
scrollRef.current.scrollToEnd({ animated: true });

스크롤의 프로그래밍 방식 제어는 채팅(최신 메시지로 자동 스크롤), 폼(오류가 있는 필드로 스크롤) 및 캐러셀(프로그래밍 방식 스와이프)에서 자주 사용됩니다.

ScrollView와 FlatList의 차이점

ScrollView와 FlatList 중 선택은 React Native의 주요 아키텍처 결정 중 하나입니다. 두 컴포넌트 모두 스크롤을 제공하지만 근본적으로 다른 렌더링 전략을 사용합니다. ScrollView는 모든 것을 한 번에 렌더링하고, FlatList는 보이는 요소만 렌더링합니다.

선택 규칙: ScrollView — 자식 요소 수를 알고 있고 20-30개를 초과하지 않는 화면용(사용자 프로필, 설정 폼, 제품 페이지). FlatList — 잠재적으로 많은 요소가 있는 목록용(뉴스 피드, 제품 카탈로그, 채팅 메시지). 콘텐츠가 이질적인 경우(헤더, 폼, 카드, 푸터) ScrollView가 선호됩니다. FlatList는 균일한 요소를 기대하기 때문입니다.

가로 스크롤 및 페이지네이션

ScrollView는 horizontal prop을 통해 가로 스크롤을 지원하므로 캐러셀, 이미지 갤러리, 탭 및 가로 목록에 이상적입니다. pagingEnabled prop(iOS) 또는 snapToInterval과 결합하면 ScrollView는 페이지 기반 탐색을 위한 컴포넌트가 됩니다.

가로 캐러셀

horizontal 속성은 스크롤 방향을 변경합니다. pagingEnabled(iOS)는 페이지 기반 스크롤을 활성화하여 요소 경계에서만 스크롤이 멈춥니다. snapToInterval은 두 플랫폼 모두에 대해 스냅 단계를 픽셀 단위로 설정합니다.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

이 캐러셀에서 pagingEnabled는 각 이미지 경계에 자동으로 스크롤을 스냅합니다. onMomentumScrollEnd는 현재 페이지 표시기를 업데이트할 수 있습니다. 이러한 캐러셀은 네이티브로 실행되며 관성 스크롤을 지원합니다.

스냅 위치 지정

비표준 스냅 단계의 경우 snapToInterval(픽셀 단계 크기)과 snapToAlignment(start, center, end)를 사용합니다. snapToOffsets를 사용하면 스냅할 특정 위치의 배열을 지정할 수 있습니다. 이는 다양한 크기의 카드가 있는 가로 목록에 유용합니다.

ScrollView 실전 예제

두 가지 일반적인 시나리오를 살펴보겠습니다: 폼 화면(세로 스크롤)과 가로 카테고리 목록입니다. 둘 다 최적의 동작을 위해 다양한 prop과 함께 ScrollView를 사용합니다.

예제 1: 폼이 있는 프로필 화면

프로필 편집 페이지에는 이질적인 요소(아바타, 여러 입력 필드, 스위치, 저장 버튼)가 포함되어 있습니다. ScrollView는 각 블록을 개별적으로 스크롤하는 대신 전체 페이지를 한 번에 스크롤할 수 있습니다.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

keyboardShouldPersistTaps: 'handled' prop은 키보드가 열려 있을 때 폼과의 스크롤 및 상호작용을 허용합니다. contentContainerStyle은 모든 콘텐츠에 패딩을 적용합니다. 이 패턴은 React Native의 모든 폼 화면에서 사용됩니다.

예제 2: 가로 카테고리 목록

카테고리(채팅, 필터, 탭)를 탐색하기 위해 칩이 있는 가로 ScrollView가 사용됩니다. 이 컴포넌트는 마켓플레이스 및 소셜 미디어 애플리케이션에서 흔히 볼 수 있습니다.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

표시기가 비활성화된 가로 ScrollView는 카테고리 스트립의 표준입니다. 각 칩은 선택 상태가 있는 별도의 컴포넌트입니다. showsHorizontalScrollIndicator: false prop은 스크롤바를 제거하여 모바일 앱 사용자의 기대와 일치합니다.