FlatList: React Native에서 API와 최적화란 무엇인가

FlatList란 무엇인가?

FlatList는 대용량 데이터 세트를 고성능으로 렌더링하는 가상화 리스트를 구현한 React Native 컴포넌트입니다. 이 컴포넌트는 VirtualizedList 위에 구축되었으며, 모든 복잡성의 플랫 리스트를 생성하기 위한 선언적 API를 제공합니다.

FlatList는 React Native 0.43에서 구형 ListView를 대체하기 위해 도입되었습니다. Meta(2026년)에 따르면 FlatList는 리스트를 사용하는 React Native 애플리케이션의 85%에서 사용됩니다. 이 컴포넌트는 연락처, 뉴스 피드, 제품 카탈로그, 채팅 등 모든 일반적인 시나리오를 지원합니다.

역사와 생태계 내 위치

FlatList 이전에는 개발자들이 수동으로 셀 재사용을 구성해야 하는 ListView를 사용했습니다. FlatList는 Android의 RecyclerView(2014년)와 iOS의 UICollectionView(2012년)와 유사한 윈도우 렌더링을 구현하여 이 프로세스를 자동화했습니다. 현대 프로젝트에서 FlatList는 모든 리스트의 사실상 표준입니다.

FlatList 가상화 작동 방식

FlatList 가상화는 컴포넌트가 화면의 보이는 영역에 속하는 요소와 각 측면의 작은 버퍼만 렌더링하는 메커니즘입니다. 나머지 요소는 DOM에 생성되지 않아 메모리를 절약하고 렌더링을 가속화합니다.

스크롤할 때 FlatList는 이미 생성된 View 셀을 재사용하여 데이터를 교체합니다. 이렇게 하면 10,000개 요소의 리스트에 대해 수천 개의 View가 생성되는 것을 방지합니다. 기본 버퍼 크기는 보이는 영역 위아래로 각각 10개 요소이지만 windowSize를 통해 구성할 수 있습니다.

이러한 매개변수의 최적 구성은 스크롤 부드러움과 메모리 소비 간의 균형을 유지할 수 있게 해줍니다. 큰 요소가 있는 리스트의 경우 windowSize를 5-7로 줄이는 것이 좋습니다.

FlatList API 및 주요 Props

FlatList API에는 리스트 표시와 동작을 구성하기 위한 일련의 Props가 포함됩니다. 필수 Props는 data(데이터 배열)와 renderItem(요소 렌더링 함수)입니다. keyExtractor는 각 요소에 고유 키를 제공하여 성능을 향상시킵니다.

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

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

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

ItemSeparatorComponent는 요소 사이에 구분선을 추가하고, ListHeaderComponent와 ListFooterComponent는 리스트에 헤더와 푸터를 추가합니다. 이를 통해 추가 래퍼 없이 복잡한 레이아웃을 만들 수 있습니다.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

FlatList 성능 최적화

FlatList 최적화는 수백, 수천 개의 요소를 가진 애플리케이션에 매우 중요합니다. 올바르게 구성하지 않으면 스크롤 시 리스트가 느려지고, 과도한 메모리를 소비하며, 저사양 기기에서 충돌이 발생할 수 있습니다.

첫 번째 규칙은 고유하고 안정적인 식별자와 함께 keyExtractor를 사용하는 것입니다. 인덱스를 키로 사용하면 잘못된 셀 재사용과 상태 버그가 발생합니다. 두 번째 규칙은 renderItem을 useCallback으로 감싸고 요소 컴포넌트에 React.memo를 사용하는 것입니다.

고정 높이를 위한 getItemLayout

모든 요소의 높이가 같으면 getItemLayout을 통해 FlatList가 컴포넌트를 측정하지 않고 스크롤 위치를 계산할 수 있습니다. 이는 특히 특정 인덱스로 스크롤할 때 상당한 성능 향상을 제공합니다.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

데이터에 대한 useMemo는 불필요한 리렌더링을 방지합니다. 데이터가 API에서 오는 경우 한 번 변환하여 캐시하세요. 요소 컴포넌트에 React.memo를 사용하여 변경되지 않은 요소의 렌더링을 방지하세요.

수평 리스트와 캐러셀

수평 FlatList는 horizontal={true} prop을 추가하여 생성합니다. 리스트의 스크롤 방향이 X축으로 변경되어 제품 캐러셀, 이미지 갤러리, 수평 메뉴에 편리합니다.

수평 모드에서는 네이티브 캐러셀처럼 단계별 스크롤을 위해 snapToInterval과 snapToAlignment를 올바르게 구성하는 것이 중요합니다. 컴포넌트는 자동으로 관성과 손가락 떼기를 처리하여 가장 가까운 요소에서 멈춥니다.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged는 보이는 요소가 변경될 때 트리거되는 콜백입니다. 분석, 이미지 지연 로딩, 보이는 카드에 대해서만 비디오 활성화에 사용됩니다.

풀-투-리프레시와 무한 스크롤

풀-투-리프레시는 FlatList에서 refreshing과 onRefresh props를 통해 구현되며, 로딩 상태와 함께 작동합니다. 리스트를 아래로 당기면 onRefresh가 호출되고 refreshing 플래그가 반복 호출을 차단합니다.

무한 스크롤은 onEndReached를 통해 구성됩니다 — 리스트 끝에 가까워지면 트리거되는 콜백입니다. onEndReachedThreshold는 끝에서 몇 개 요소 전에 이벤트가 발생할지 결정합니다. 일반적으로 커서 기반 페이지네이션이 사용됩니다.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

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

중요: onEndReached는 여러 번 호출될 수 있습니다. 이전 요청이 완료될 때까지 반복 요청을 차단하기 위해 isLoading 플래그를 추가하세요. 로딩을 표시하려면 ListFooterComponent에서 ActivityIndicator를 사용하세요.