getUser로 사용자 정보를 불러오고, 또 getPosts로 포스트 목록을 조회하도록 구현해줬습니다. 사용자 정보는 FlatList의 ListHeaderComponent를 통해서 보여주도록 했는데, 이렇게 FlatList 내부에 보이도록 한 이유는 사용자 정보를 스크롤 영역에 포함시키기 위함입니다.

현재 사용자의 프로필 사진을 보여주는 Image 컴포넌트는 PostCard와 SetupProfile에서 사용한 것과 매우 유사한데요. 이렇게 반복되는 코드를 리팩토링해줍시다. Avatar라는 컴포넌트를 다음과 같이 작성해주세요.

components/Avatar.js

import React from 'react';
import {Image} from 'react-native';

function Avatar({source, size, style}) {
  return (
    <Image
      source={source || require('../assets/user.png')}
      resizeMode="cover"
      style={[
        style,
        {
          width: size,
          height: size,
          borderRadius: size / 2,
        },
      ]}
    />
  );
}
Avatar.defaultProps = {
  size: 32,
};

export default Avatar;