9.4.3 FeedScreen에서 getPost 호출 후 FlatList로 보여주기

이제 FeedScreen 화면이 보일 때 포스트 정보들을 띄우도록 구현해보겠습니다. getPost 함수를 호출해 데이터를 조회한 뒤 FlatList를 사용할 것입니다. 화면에 FeedScreen 화면을 보여주는 시점에 특정 작업을 하려면 useEffect를 사용하면 됩니다. posts라는 배열 상태를 선언하고, useEffect에서 getPost를 호출한 뒤 결괏값을 상태에 담으세요. 그리고 FlatList를 사용해 배열 안의 데이터에 기반해 PostCard 컴포넌트를 보여주세요.

screens/FeedScreen.js

import React, {useEffect, useState} from 'react';
import {FlatList} from 'react-native';
import PostCard from '../components/PostCard';
import {getPosts} from '../lib/posts';

function FeedScreen() {
  const [posts, setPosts] = useState(null);
  
  useEffect(() => {
    // 컴포넌트가 처음 마운트될 때 포스트 목록을 조회한 후 `posts` 상태에 담기
    getPosts().then(setPosts);
  }, []);

  return (
    <FlatList
      data={posts}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
}

const renderItem = ({item}) => (
  <PostCard
    createdAt={item.createdAt}
    description={item.description}
    id={item.id}
    user={item.user}
    photoURL={item.photoURL}
  />
);

export default FeedScreen;