7.5.3 달력 하단에 로그 목록 보여주기

이번에는 특정 날짜를 선택했을 때 그날 작성된 로그들을 달력 하단에 목록으로 띄워볼 텐데, 이때 FeedList를 재사용할 수 있습니다. FeedList를 CalendarView 하단에 보여주는 것은 아니고요. FeedList에서 사용한 FlatList에 ListHeaderComponent라는 Props를 사용할 것입니다. 이 Props를 통해 FlatList의 내용 상단부에 특정 컴포넌트를 보여줄 수 있답니다.

FeedList 컴포넌트를 다음과 같이 수정하세요.

components/FeedList.js

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

function FeedList({logs, onScrolledToBottom, ListHeaderComponent}) {
  (...)

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

(...)