ScrollView vs FlatList — 언제 무엇을 써야 하는가

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

function SettingsScreen() {
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.content}
      showsVerticalScrollIndicator={false}
    >
      {/* 고정된 수의 UI 요소들 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>계정</Text>
        <SettingItem label="이름" value="심정훈" />
        <SettingItem label="이메일" value="test@email.com" />
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>알림</Text>
        <SettingItem label="푸시 알림" />
        <SettingItem label="이메일 알림" />
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>기타</Text>
        <SettingItem label="다크 모드" />
        <SettingItem label="언어" value="한국어" />
        <SettingItem label="앱 버전" value="1.0.0" />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  content: { padding: 20 },
  section: { marginBottom: 24 },
  sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 12 },
});

<ScrollView
  // 스크롤 방향
  horizontal={false}

  // 스크롤 인디케이터
  showsVerticalScrollIndicator={false}

  // 페이징 (슬라이드 효과)
  pagingEnabled

  // 바운스 효과 (iOS)
  bounces={true}

  // 스크롤 이벤트
  onScroll={(event) => {
    const y = event.nativeEvent.contentOffset.y;
    console.log('스크롤 위치:', y);
  }}
  scrollEventThrottle={16}  // 16ms마다 이벤트 발생

  // 키보드 처리
  keyboardShouldPersistTaps="handled"
  keyboardDismissMode="on-drag"

  // 컨텐츠 최소 높이 (짧은 컨텐츠에서도 스크롤 영역 확보)
  contentContainerStyle={{ flexGrow: 1 }}
/>

// 이렇게 하면 1000개 아이템이 모두 한 번에 렌더링됨 → 메모리 폭발
function BadExample() {
  const data = Array.from({ length: 1000 }, (_, i) => `아이템 ${i}`);

  return (
    <ScrollView>
      {data.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

// FlatList로 변경하면 보이는 아이템만 렌더링
function GoodExample() {
  const data = Array.from({ length: 1000 }, (_, i) => ({
    id: String(i),
    label: `아이템 ${i}`,
  }));

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.label}</Text>
        </View>
      )}
    />
  );
}

// 1. 서버에서 받아오는 동적 데이터
function FeedScreen() {
  const [posts, setPosts] = useState<Post[]>([]);

  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <PostCard post={item} />}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
}

// 2. 검색 결과
function SearchResults({ results }: { results: SearchResult[] }) {
  return (
    <FlatList
      data={results}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <ResultItem result={item} />}
      ListEmptyComponent={<Text>검색 결과가 없습니다</Text>}
    />
  );
}

// 방법 1: FlatList의 ListHeaderComponent 사용 (권장)
function ProfileScreen() {
  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <PostCard post={item} />}
      // 리스트 위에 고정 콘텐츠 배치
      ListHeaderComponent={() => (
        <>
          <ProfileHeader />
          <StatsSection />
          <TabSelector />
        </>
      )}
    />
  );
}

// 방법 2: ScrollView 안에 FlatList (비권장 — 성능 문제)
// 이렇게 하면 FlatList의 가상화가 무력화됨!
function BadCombination() {
  return (
    <ScrollView>
      <HeaderSection />
      {/* FlatList에 scrollEnabled={false}를 줘야 하므로 가상화 무의미 */}
      <FlatList
        data={data}
        renderItem={renderItem}
        scrollEnabled={false}
      />
    </ScrollView>
  );
}

데이터 100개 기준:
┌──────────────────────────────────────┐
│ ScrollView                           │
│ - 초기 렌더링: 100개 전부 → 느림     │
│ - 메모리: ~50MB                      │
│ - 스크롤: 부드러움                   │
├──────────────────────────────────────┤
│ FlatList                             │
│ - 초기 렌더링: 10개만 → 빠름         │
│ - 메모리: ~15MB                      │
│ - 스크롤: 부드러움 (설정에 따라)     │
└──────────────────────────────────────┘

데이터 1000개 기준:
┌──────────────────────────────────────┐
│ ScrollView                           │
│ - 초기 렌더링: 1000개 → 매우 느림    │
│ - 메모리: ~200MB+ → 크래시 위험      │
│ - 스크롤: 버벅거림                   │
├──────────────────────────────────────┤
│ FlatList                             │
│ - 초기 렌더링: 10개만 → 빠름         │
│ - 메모리: ~20MB (일정 유지)          │
│ - 스크롤: 최적화 설정에 따라 부드러움│
└──────────────────────────────────────┘