[React Native] FlatList

React의 Map역할을 하는 리액트 네이티브의 FlatList에 대해 알아보도록 하자.

우선 아래와 같이 코드 최상단에 FlatList를 입력해준다.
import {View, Text, FlatList} from 'react-native';
그리고 아래와 같이 FlatList 를 만들어 준다.

      <FlatList
        data={DATA} //리스트 나열에 사용할 데이터
        renderItem={renderItem} //렌더링 될 데이터 나열 방식
        keyExtractor={item => item.name} //Key값 지정
      />

이제 중요한것은 위에 보이는 renderItem이다. 아래와 같이 렌더링 시켜줄 데이터의 나열 방식을 만들어 준다.

  const renderItem = ({item}) => {
    const categoryTitle = item?.name;
    const doneVideos = item?.doneVideos;
    const totalVideos = item?.totalVideos;
    const rate = (doneVideos / totalVideos) * 100;
    console.log(rate);

    return (
      <View style={styles.wrap}>
        <TouchableOpacity
          style={styles.button}
          activeOpacity={0.5}
          onPress={() =>
            navigation.navigate('Categorization', {
              name: categoryTitle,
              labeler: objectId,
            })
          }>
          <Text style={{fontWeight: 'bold', color: '#2323dd'}}>
            {categoryTitle}
          </Text>
        </TouchableOpacity>
        <Progress.Bar
          progress={rate / 100}
          width={null}
          height={10}
          marginTop={10}
          color={'#FF0044'}
        />
        <View style={{alignItems: 'center'}}>
          <Text style={{fontWeight: 'bold', color: '#2b2525'}}>
            진행률 {rate}%
          </Text>
        </View>
      </View>
    );
  };

자 이제 완료 되었다. 내가 만든 FlatList는 아래와 같이 렌더링 된다.

FlatList 의 전체적인 틀을 보여주기 위해 공식사이트에 있는 예시 코드를 첨부한다.

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

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

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

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

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

FlatList 완성! 꾸준히 공부해서 훌륭한 개발자 됩시다!