[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