다음으로 Articles 컴포넌트에서 Props의 타입을 수정하고, refreshControl을 설정하여 화면을 당겨서 새로고침하는 기능을 구현하세요.

components/Articles.tsx

import React from 'react';
import {
  View,
  StyleSheet,
  FlatList,
  ActivityIndicator,
  RefreshControl,
} from 'react-native';
import {Article} from '../api/types';
import ArticleItem from './ArticleItem';
import WriteButton from './WriteButton';

export interface ArticlesProps {
  articles: Article[];
  showWriteButton?: boolean;
  isFetchingNextPage: boolean;
  fetchNextPage(): void;
  refresh(): void;
  isRefreshing: boolean;
}

function Articles({
  articles,
  showWriteButton,
  isFetchingNextPage,
  fetchNextPage,
  refresh,
  isRefreshing,
}: ArticlesProps) {
  return (
    <FlatList
      (...)
      refreshControl={
        <RefreshControl onRefresh={refresh} refreshing={isRefreshing} />
      }
    />
  );
}

(...)

이제 Postman을 사용하거나 다른 시뮬레이터에서 게시글을 작성한 다음에 화면을 아래로 당겨서 새로고침해보세요. 새로운 게시글이 잘 나타났나요?