[React-Native] FlatList란?

애플 제품을 사기 전에 필요한건 애플 주식

💡 FlatList란?

• FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 유용하게 사용되는 RN 컴포넌트이다.
• list를 보여주고 싶을 때 js에서 map을 사용하면 되는데 ? 라고 할 수 있지만 FlatList는 map보다 더 많은 기능을 내포하고 있어서 RN에서 더 많이 쓰이는 컴포넌트이다.

💡 ScrollView에 FlatList를 곁들인..

ScrollView 컴포넌트는 데이터가 화면에 벗어났을 때 단순히 Scrill을 생성하여 사용자와 상호작용(swipe)을 통해 벗어난 부분을 볼 수 있게 해주기 위한 목적에 있다.

출력해야하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트

RN에서 많은 양의 데이터를 출력 할 때 FlatList와 ScrollView를 함께 주로 사용하는데 사용 용도에 따라 차이점이 조금 있다.

FlatList가 ScrollView보다 조금 더 많은 기능이 있다. ScrollView는 데이터가 화면에 벗어났을 때도 Scroll을 생성하지만, 한 번에 모든 데이터를 렌더링 하지 않고 화면에 보여지는 부분 (혹은 설정한 수만큼의 데이터)만 렌더링한다는 차이가 있다.

그렇기에 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우에 사용하기 적절하다.

• 예를 들어 API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우가 있을 것이다.

💡 예제를 통한 수련

FlatList를 사용하려면 두개의 props를 꼭 알아야한다.

data , renderItem

data는 만들고자 하는 리스트의 source를 담는 props이다.
renderItem은 data로 받은 소스들 그 각각의 item들을 render 시켜주는 콜백함수이다.
KeyExtractor는 js에서 map()을 사용할 때 데이터의 추적이 좀 더 쉽도록 해주는 key값처럼 item 각각 고유의 키를 부여해주는 것이라고 생각하면 된다.

💡 예제

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

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Forth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
  {
    id: '8',
    title: 'Eighth Item',
  },
  {
    id: '9',
    title: 'Ninth Item',
  },
  {
    id: '10',
    title: 'Tenth Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

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

위 코드를 가볍게 해석을해보자.

• FlatList에서 콜백함수인 renderItem을 가져온다.
• 함수로 지정된 renderItem은 Item 컴포넌트를 불러오면서 item을 파라미터로 받아서 item의 타이틀을 화면에 보여준다.
• Item 컴포넌트는 title을 파라미터로 받아서 <Text>안에 받아온 title을 보여주는 역할을 한다.

이 블로그를 작성하면서도 이렇게까지...? 라는 생각이 들었지만 데이터가 들어오는게 동일하고 양이 많다면 FlatList는 정말 유요하게 사용될 것 같다.