한 열에 3개의 컴포넌트가 보이도록 할 거라서 컴포넌트의 가로 폭을 화면 가로 크기의 1/3로 설정했습니다. 추후 이 컴포넌트를 눌렀을 때 단일 포스트를 조회할 수 있는 화면을 띄울 건데요. 이때 post의 전체 정보가 필요하기 때문에 이 컴포넌트에서는 Props로 post 객체를 통째로 받아오도록 구현했습니다.

이제 이 컴포넌트를 Profile 컴포넌트에서 사용해볼까요?

components/Profile.js

import React, {useEffect} from 'react';
import {useState} from 'react';
import {
  ActivityIndicator,
  FlatList,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {getPosts} from '../lib/posts';
import {getUser} from '../lib/users';
import Avatar from './Avatar';
import PostGridItem from './PostGridItem';

function Profile({userId}) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState(null);

  (...)

  return (
    <FlatList
      style={styles.block}
      data={posts}
      renderItem={renderItem}
      numColumns={3}
      keyExtractor={(item) => item.id}
      ListHeaderComponent={
        <View style={styles.userInfo}>
          <Avatar source={user.photoURL && {uri: user.photoURL}} size={128} />
          <Text style={styles.username}>{user.displayName}</Text>
        </View>
      }
    />
  );
}

const renderItem = ({item}) => <PostGridItem post={item} />;

(...)