[React Native] FlatList

FlatList

들어가며

• 리액트 네이티브(React Native)의 @FlatList@ 컴포넌트에 대해 정리해본다.

 

FlatList

개념

• 효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트
• 최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.
  • @ScrollView@ 컴포넌트와의 차이점

 

주요 속성

속성	설명
@data@	- 렌더링할 데이터 배열(Array)을 전달 - 배열의 각 요소는 렌더링될 항목의 데이터
@renderItem@	- 데이터를 어떻게 렌더링할지 정의하는 함수 - 매개변수로 @{ item, index }@ 형태의 객체를 받는다.
@keyExtractor@	- 각 항목의 고유 키를 반환하는 함수 - 기본적으로 @item.key@ 또는 @item.id@를 사용한다.
@onEndReached@	- 목록의 끝에 도달했을 때 호출되는 콜백 함수 - 무한 스크롤 기능을 구현하는데 사용된다.
@horizontal@	가로 방향 스크롤 활성화 (기본값 : @false@)
@numColumns@	열(Column)의 수 지정 (그리드 형식으로 데이터를 표시하기 위해 사용)

 

반복할 요소의 키(Key) 설정 방법

• 다음과 같이 2가지 방법으로 키(Key)를 설정할 수 있다.

 

방법 1 : 데이터에 @key@ 속성 추가하기

• 데이터가 객체(Object)일 경우, @key@ 속성을 포함시킨다.

// ...

const courseGoal = [
  {
    text: '1',
    key: Math.random().toString(),   // key 값 추가
  },
  {
    text: '2',
    key: Math.random().toString(),  // key 값 추가
  },
  {
    text: '3',
    key: Math.random().toString(),  // key 값 추가
  }
];

// ...

<FlatList
  data={courseGoals}
  renderItem={(itemData) => {
    return (
      <View>
        <Text>{itemData.item.text}</Text>
      </View>
    );
  }}
/>

 

방법 2 : @keyExtractor@ 속성 사용하기

• 데이터에서 고유한 키를 추출하는 방법을 @FlatList@에 알려주는 방법이다.
• @FlatList@의 @keyExtractor@ 속성을 사용하여 데이터에서 키로 설정할 값을 추출한다.

// ...

const courseGoal = [
  {
    text: '1',
    id: Math.random().toString(),  
  },
  {
    text: '2',
    id: Math.random().toString(), 
  },
  {
    text: '3',
    id: Math.random().toString(),  
  }
];

// ...

<FlatList
  data={courseGoals}
  renderItem={(itemData) => {
    return (
      <View>
        <Text>{itemData.item.text}</Text>
      </View>
    );
  }}
  keyExtractor={(item, index) => {
    return item.id;  // 키값 추출
  }}
/>

 

ScrollView 컴포넌트와의 차이점

렌더링 방식

특징	FlatList	ScrollView
렌더링	필요한 데이터만 렌더링 (가상화)	모든 데이터를 한번에 렌더링
대량 데이터 처리	데이터 양이 많아도 성능이 좋음.	데이터 양이 많으면 메모리 문제 발생

 

데이터 구조

특징	FlatList	ScrollView
데이터 관리	배열 형태의 @data@ 프로퍼티 필요	자식 컴포넌트로 직접 추가 가능
동적 데이터	@data@ 변경 시 자동으로 리렌더링	데이터 변경 시 수동으로 추가/제거 필요

 

사용 목적

특징	FlatList	ScrollView
렌더링	대량의 동적 데이터 (리스트, 무한 스크롤)	소량의 고정 데이터 (폼, 이미지 갤러리 등)
대량 데이터 처리	세로/가로 리스트 또는 그리드	자유로운 레이아웃

 

최적화

특징	FlatList	ScrollView
성능 최적화	자동으로 가상화 처리	렌더링 최적화 기능 없음
추가 설정	@initialNumToRender@, @maxToRenderPerBatch@ 등으로 최적화	추가적인 최적화 옵션 없음

 

무한 스크롤

특징	FlatList	ScrollView
지원 여부	@onEndReached@를 통해 무한 스크롤 구현 가능	기본적으로 지원하지 않음
무한 스크롤 구현	간단하게 추가 가능	스크롤 이벤트를 수동으로 관리해야 함

 

사용 코드 비교

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

const courseGoals = [
  {
    text: 'Learn React Native',
    id: Math.random().toString(),
  },
  {
    text: 'Learn React.js',
    id: Math.random().toString(),
  },
]

 

ScrollView

// (1) ScrollView
<ScrollView>
  {courseGoals.map((goal, index) => (
    <View key={goal.id}>
      <Text>{goal.text}</Text>
    </View>
  ))}
</ScrollView>

 

FlatList

// (2) FlatList
<FlatList
  data={courseGoals}
  renderItem={(itemData) => {
    return (
      <View>
        <Text>{itemData.item.text}</Text>
      </View>
    );
  }}
  keyExtractor={(item, index) => {
    return item.id; // 키값 추출
  }}
  alwaysBounceVertical={false}
/>

 

사용 예제

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

const MyComponent = () => {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
  ];

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
};

export default MyComponent;

 

참고 사이트

FlatList · React Native

ScrollView · React Native