이렇게 하면 콘텐츠의 85%까지 스크롤했을 때 onEndReached 함수가 호출됩니다. 스크롤로 더 많은 정보를 불러오는 무한스크롤링을 구현할 때 이 Props를 사용하면 유용한데, 현재 우리 상황에는 사용하지 못합니다. 스크롤이 바닥에서 가까워지면 글쓰기 버튼을 숨기고, 멀어지면 글쓰기 버튼을 다시 보여줘야 하는데 이 방식은 멀어졌을 때를 구분하지 못하기 때문입니다.

onEndReached를 사용하는 대신 onScroll 이벤트를 사용할 것입니다. onScroll 이벤트를 사용하면 콘텐츠의 전체 크기와 스크롤의 위치를 알아낼 수 있습니다. onScroll Props는 ScrollView의 onScroll과 동일합니다. 자세한 내용은 다음 링크를 확인해보세요.

• https://reactnative.dev/docs/scrollview#onscroll

FeedList에서 onScroll 함수를 다음과 같이 구현해보세요. 그리고 스크롤을 맨 아래로 내린 뒤 터미널에 출력되는 결과물을 확인해보세요.

components/FeedList.js

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

function FeedList({logs}) {
  const onScroll = (e) => {
    const {contentSize, layoutMeasurement, contentOffset} = e.nativeEvent;
    console.log({contentSize, layoutMeasurement, contentOffset});
  };
  return (
    <FlatList
      data={logs}
      style={styles.block}
      renderItem={({item}) => <FeedListItem log={item} />}
      keyExtractor={(log) => log.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      onScroll={onScroll}
    />
  );
}

(...)