6.4.2 FeedList 컴포넌트 만들기

이번에는 FeedList 컴포넌트를 만들어봅시다. 이 컴포넌트는 logs라는 Props를 받아와서 FlatList를 통해 여러 항목을 보여줍니다.

FeedsScreen에서 FlatList를 바로 사용하지 않고 FeedList 컴포넌트를 따로 만드는 이유는 추후 달력 화면에서도 이 컴포넌트를 재사용할 것이기 때문입니다.

components/FeedList.js

import React from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import FeedListItem from './FeedListItem';

function FeedList({logs}) {
  return (
    <FlatList
      data={logs}
      style={styles.block}
      renderItem={({item}) => <FeedListItem log={item} />}
      keyExtractor={(log) => log.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
}

const styles = StyleSheet.create({
  block: {flex: 1},
  separator: {
    backgroundColor: '#e0e0e0',
    height: 1,
    width: '100%',
  },
});

export default FeedList;