[React Native] FlatList

카테고리 : Development
태그: development · reactnative · FlatList
등록일: 2023년 09월 29일
최근 업데이트: 2023년 09월 29일

---

• FlatList
  • 🤳🏻 주요 특징:
  • 🤳🏻 사용 방법:
  • 🤳🏻 속성 :

• this ordered seed list will be replaced by the toc

FlatList

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

🤳🏻 주요 특징:

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

🤳🏻 사용 방법:

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

1. FlatList 컴포넌트를 React Native 앱의 JSX 내에 추가합니다.
2. data 속성에 표시할 데이터 배열을 제공합니다.
3. renderItem 속성을 사용하여 각 항목을 렌더링하는 함수나 컴포넌트를 정의합니다.
4. 다른 속성들을 사용하여 필요한 구성을 설정하고 필요한 동작을 정의합니다. 예를 들어, horizontal 속성을 true로 설정하여 가로 스크롤 리스트를 만들거나, onEndReached를 사용하여 무한 스크롤을 구현할 수 있습니다.
5. 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=>
    <Text>{item.text}</Text>
  </View>
);

const MyFlatList = () => <FlatList data={data} renderItem={renderItem} />;

export default MyFlatList;

🤳🏻 속성 :

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

   FlatList에 표시할 항목들을 담고 있는 배열입니다.

2. renderItem (Type: Function or Component) - 각 항목을 렌더링하는 데 사용되는 함수 또는 컴포넌트입니다. 이 속성은 필수입니다.

   각 항목을 화면에 어떻게 표시할지 정의하는 함수 또는 컴포넌트입니다.

3. keyExtractor (Type: Function) - 각 항목의 고유한 키를 추출하기 위한 함수를 정의합니다.

   각 항목에 대한 고유한 식별자를 추출하는 함수를 지정합니다.

4. horizontal (Type: Boolean) - 리스트를 가로로 스크롤할지 여부를 설정합니다. true로 설정하면 가로 스크롤 리스트로 변경됩니다.

   리스트가 가로 방향으로 스크롤할지 여부를 나타내는 부울 값입니다.

5. numColumns (Type: Integer) - 그리드 레이아웃을 사용할 때 열의 수를 지정합니다.

   그리드 형식의 리스트를 만들 때 한 행당 열의 수를 설정합니다.

6. columnWrapperStyle (Type: Style Object) - 그리드 레이아웃에서 각 열을 래핑하는 뷰의 스타일을 정의합니다.

   그리드 레이아웃의 열을 래핑하는 뷰의 스타일을 지정하는 스타일 객체입니다.

7. ListHeaderComponent (Type: Component) - 리스트의 맨 위에 추가할 컴포넌트를 정의합니다.

   리스트의 맨 위에 표시되는 컴포넌트로, 주로 제목이나 헤더 정보를 표시하는 데 사용됩니다.

8. ListFooterComponent (Type: Component) - 리스트의 맨 아래에 추가할 컴포넌트를 정의합니다.

   리스트의 맨 아래에 표시되는 컴포넌트로, 추가 정보나 더 많은 항목을 표시하는 데 사용됩니다.

9. ItemSeparatorComponent (Type: Component) - 항목 간의 구분선을 정의하는 컴포넌트입니다.

   항목 사이에 표시되는 구분선을 나타내는 컴포넌트입니다.

10. ListEmptyComponent (Type: Component) - 데이터가 비어 있을 때 표시할 컴포넌트를 정의합니다.

    데이터가 비어 있을 때 사용자에게 메시지를 표시하는 데 사용되는 컴포넌트입니다.

11. initialNumToRender (Type: Integer) - 처음 렌더링할 항목의 개수를 설정합니다.

    최초 렌더링 시에 몇 개의 항목을 화면에 표시할지 설정합니다.

12. onEndReached (Type: Function) - 리스트의 끝에 도달했을 때 호출되는 함수를 정의합니다.

    사용자가 리스트의 끝으로 스크롤했을 때 호출되는 함수를 지정합니다.

13. onEndReachedThreshold (Type: Floating-Point Number) - onEndReached 이벤트가 호출되기 전에 스크롤 위치를 얼마나 가까이 해야 하는지 설정합니다.

    onEndReached 이벤트가 호출되기 전에 스크롤 위치를 얼마나 가까이 해야 하는지를 나타내는 부동소수점 숫자입니다.

14. refreshing (Type: Boolean) - 새로고침 인디케이터를 표시하려면 true로 설정하고 onRefresh 함수를 제공합니다.

    사용자에게 새로고침 동작을 제공하고 해당 동작을 처리하는 데 사용되는 부울 값입니다.

15. onRefresh (Type: Function) - 새로고침 동작을 처리하는 함수를 정의합니다.

    사용자가 새로고침 동작을 시작할 때 호출되는 함수를 지정합니다.

16. extraData (Type: Arbitrary Value) - 렌더링에 영향을 미치는 데이터의 변경 사항을 감지하기 위한 값을 설정합니다.

    컴포넌트의 렌더링에 영향을 미치는 데이터의 변경을 감지하고 해당 값을 업데이트하는 데 사용되는 임의의 값입니다.

17. initialScrollIndex (Type: Integer) - 초기 스크롤 위치를 설정합니다.

    리스트가 처음 렌더링될 때 특정 항목이 보이도록 초기 스크롤 위치를 설정하는 데 사용됩니다.

18. initialScrollOffset (Type: Integer) - 초기 스크롤 위치의 오프셋을 설정합니다.

    초기 스크롤 위치의 픽셀 단위 오프셋을 설정하는 데 사용됩니다.

19. removeClippedSubviews (Type: Boolean) - 화면에 보이지 않는 항목을 자르고 재사용하기 위한 최적화를 활성화하려면 true로 설정합니다.

    성능 최적화를 위해 화면에 보이지 않는 항목을 자르고 재사용할지 여부를 설정하는 부울 값입니다.

20. onViewableItemsChanged (Type: Function) - 보이는 항목의 변경 사항을 처리하는 함수를 정의합니다.

    화면에 보이는 항목이 변경될 때 해당 변경 사항을 처리하는 함수를 지정합니다.

21. viewabilityConfig (Type: Object) - onViewableItemsChanged에서 사용할 가시성 설정을 지정합니다.

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