커스텀 Hook은 함수 컴포넌트랑 비슷한데, 차이점은 JSX를 반환하지 않는다는 것입니다. 컴포넌트를 만들 때처럼 다른 Hook 함수를 마음껏 사용하고, 여기서 만들어진 상태나 함수들을 반환하면 됩니다. 그리고 이 Hook의 useEffect는 이전에 작성한 것과 조금 다릅니다. 가장 처음 조회한 포스트의 수가 PAGE_SIZE보다 작으면 noMorePost의 값을 true로 변경시키는 로직을 추가했습니다.

이렇게 커스텀 Hook을 만든 다음에는 원하는 곳에 사용해주면 됩니다. 먼저 FeedScreen에서 기존 로직을 다 날려버리고 방금 만든 Hook을 사용해볼까요?

screens/FeedScreen.js

(...)
import usePosts from '../hooks/usePosts';

function FeedScreen() {
  const {posts, noMorePost, refreshing, onLoadMore, onRefresh} = usePosts();
  return (
    <FlatList
      data={posts}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.container}
      onEndReached={onLoadMore}
      onEndReachedThreshold={0.75}
      ListFooterComponent={
        !noMorePost && (
          <ActivityIndicator style={styles.spinner} size={32} color="#6200ee" />
        )
      }
      refreshControl={
        <RefreshControl onRefresh={onRefresh} refreshing={refreshing} />
      }
    />
  );
}

(...)