FlatList

FlatList는 React Native에서 리스트나 스크롤 가능한 목록을 렌더링하기 위한 핵심 컴포넌트 중 하나입니다. 이 컴포넌트는 매우 큰 목록이나 데이터 세트를 처리하는 데 매우 효율적이며, 가로 스크롤 또는 그리드 레이아웃과 같은 다양한 리스트 유형을 지원

🤳🏻주요 특징:

효율적인 렌더링: **FlatList**는 필요한 항목만 렌더링하여 성능을 최적화합니다. 화면에 보이는 항목만 렌더링하므로 대규모 데이터 세트를 처리하는 데 적합합니다.
다양한 목록 유형 지원: **FlatList**는 수직 목록 뿐만 아니라 가로 목록 및 그리드 레이아웃도 지원합니다. horizontal 및 numColumns 속성을 사용하여 레이아웃을 변경할 수 있습니다.
각 항목의 커스터마이즈: renderItem 속성을 사용하여 각 항목의 모양과 내용을 완전히 커스터마이즈할 수 있습니다. 이것은 복잡한 항목을 표시하는 데 매우 유용합니다.
새로고침 및 무한 스크롤: **FlatList**는 새로고침 기능을 제공하고, onEndReached 속성을 통해 무한 스크롤을 구현할 수 있습니다.
항목의 동적 크기 지원: 각 항목이 다른 크기를 가질 수 있으며, getItemLayout 속성을 사용하여 항목의 크기를 동적으로 계산할 수 있습니다.

🤳🏻사용 방법:

**FlatList**를 사용하기 위해서는 다음 단계를 따릅니다:

FlatList 컴포넌트를 React Native 앱의 JSX 내에 추가합니다.
data 속성에 표시할 데이터 배열을 제공합니다.
renderItem 속성을 사용하여 각 항목을 렌더링하는 함수나 컴포넌트를 정의합니다.
다른 속성들을 사용하여 필요한 구성을 설정하고 필요한 동작을 정의합니다. 예를 들어, horizontal 속성을 **true**로 설정하여 가로 스크롤 리스트를 만들거나, **onEndReached**를 사용하여 무한 스크롤을 구현할 수 있습니다.
FlatList 컴포넌트를 스타일링하고 레이아웃을 조정하여 원하는 모양을 만듭니다.

import React from "react";
import { FlatList, Text, View } from "react-native";
 
const data = [
  { key: "1", text: "Item 1" },
  { key: "2", text: "Item 2" },
  // ...
];
 
const renderItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item.text}</Text>
  </View>
);
 
const MyFlatList = () => <FlatList data={data} renderItem={renderItem} />;
 
export default MyFlatList;

🤳🏻속성 :

data (Type: Array) - **FlatList**에 표시할 데이터를 포함하는 배열입니다.

**FlatList**에 표시할 항목들을 담고 있는 배열입니다.
renderItem (Type: Function or Component) - 각 항목을 렌더링하는 데 사용되는 함수 또는 컴포넌트입니다. 이 속성은 필수입니다.

각 항목을 화면에 어떻게 표시할지 정의하는 함수 또는 컴포넌트입니다.
keyExtractor (Type: Function) - 각 항목의 고유한 키를 추출하기 위한 함수를 정의합니다.

각 항목에 대한 고유한 식별자를 추출하는 함수를 지정합니다.
horizontal (Type: Boolean) - 리스트를 가로로 스크롤할지 여부를 설정합니다. **true**로 설정하면 가로 스크롤 리스트로 변경됩니다.

리스트가 가로 방향으로 스크롤할지 여부를 나타내는 부울 값입니다.
numColumns (Type: Integer) - 그리드 레이아웃을 사용할 때 열의 수를 지정합니다.

그리드 형식의 리스트를 만들 때 한 행당 열의 수를 설정합니다.
columnWrapperStyle (Type: Style Object) - 그리드 레이아웃에서 각 열을 래핑하는 뷰의 스타일을 정의합니다.

그리드 레이아웃의 열을 래핑하는 뷰의 스타일을 지정하는 스타일 객체입니다.
ListHeaderComponent (Type: Component) - 리스트의 맨 위에 추가할 컴포넌트를 정의합니다.

리스트의 맨 위에 표시되는 컴포넌트로, 주로 제목이나 헤더 정보를 표시하는 데 사용됩니다.
ListFooterComponent (Type: Component) - 리스트의 맨 아래에 추가할 컴포넌트를 정의합니다.

리스트의 맨 아래에 표시되는 컴포넌트로, 추가 정보나 더 많은 항목을 표시하는 데 사용됩니다.
ItemSeparatorComponent (Type: Component) - 항목 간의 구분선을 정의하는 컴포넌트입니다.

항목 사이에 표시되는 구분선을 나타내는 컴포넌트입니다.
ListEmptyComponent (Type: Component) - 데이터가 비어 있을 때 표시할 컴포넌트를 정의합니다.

데이터가 비어 있을 때 사용자에게 메시지를 표시하는 데 사용되는 컴포넌트입니다.
initialNumToRender (Type: Integer) - 처음 렌더링할 항목의 개수를 설정합니다.

최초 렌더링 시에 몇 개의 항목을 화면에 표시할지 설정합니다.
onEndReached (Type: Function) - 리스트의 끝에 도달했을 때 호출되는 함수를 정의합니다.

사용자가 리스트의 끝으로 스크롤했을 때 호출되는 함수를 지정합니다.
onEndReachedThreshold (Type: Floating-Point Number) - onEndReached 이벤트가 호출되기 전에 스크롤 위치를 얼마나 가까이 해야 하는지 설정합니다.

onEndReached 이벤트가 호출되기 전에 스크롤 위치를 얼마나 가까이 해야 하는지를 나타내는 부동소수점 숫자입니다.
refreshing (Type: Boolean) - 새로고침 인디케이터를 표시하려면 **true**로 설정하고 onRefresh 함수를 제공합니다.

사용자에게 새로고침 동작을 제공하고 해당 동작을 처리하는 데 사용되는 부울 값입니다.
onRefresh (Type: Function) - 새로고침 동작을 처리하는 함수를 정의합니다.

사용자가 새로고침 동작을 시작할 때 호출되는 함수를 지정합니다.
extraData (Type: Arbitrary Value) - 렌더링에 영향을 미치는 데이터의 변경 사항을 감지하기 위한 값을 설정합니다.

컴포넌트의 렌더링에 영향을 미치는 데이터의 변경을 감지하고 해당 값을 업데이트하는 데 사용되는 임의의 값입니다.
initialScrollIndex (Type: Integer) - 초기 스크롤 위치를 설정합니다.

리스트가 처음 렌더링될 때 특정 항목이 보이도록 초기 스크롤 위치를 설정하는 데 사용됩니다.
initialScrollOffset (Type: Integer) - 초기 스크롤 위치의 오프셋을 설정합니다.

초기 스크롤 위치의 픽셀 단위 오프셋을 설정하는 데 사용됩니다.
removeClippedSubviews (Type: Boolean) - 화면에 보이지 않는 항목을 자르고 재사용하기 위한 최적화를 활성화하려면 **true**로 설정합니다.

성능 최적화를 위해 화면에 보이지 않는 항목을 자르고 재사용할지 여부를 설정하는 부울 값입니다.
onViewableItemsChanged (Type: Function) - 보이는 항목의 변경 사항을 처리하는 함수를 정의합니다.

화면에 보이는 항목이 변경될 때 해당 변경 사항을 처리하는 함수를 지정합니다.
viewabilityConfig (Type: Object) - **onViewableItemsChanged**에서 사용할 가시성 설정을 지정합니다.

onViewableItemsChanged 이벤트에서 사용할 가시성 설정을 지정하는 객체입니다.